estoy intento capturar el valor de un select que pasa 2 values 1 y 2 de un formulario hacia otra pagina y en localstorage he intentado pero siempre me manda solo el value 1 no consigo enviar el value 2. por otra parte estoy intentando cuando esos valores llegan a la otra pagina por loclastorge que los valores se mantengan permanentes y al refresacar me retorna al formulario. Gracias. ya intente varios meteodos pero no lo logro. estoy usando redux con react. gracias por el apoyo. puedo enviar mas detalles si se nesecita.
// formulario
import React, { useEffect, useRef, useState } from "react";
import { useForm } from "../../hooks/useForm";
import ReCAPTCHA from "react-google-recaptcha";
import { getLoginAction } from "../../redux/auth";
import { useDispatch } from "react-redux";
import { useHistory } from "react-router-dom";
import { useSelector } from "react-redux";
export const FormLogin = () => {
const history = useHistory();
const dispatch = useDispatch();
const { user, pass, cliente_gg, cliente_pv } = useSelector((store) => store.auth);
console.log(cliente_gg, cliente_pv, 'clientes');
useEffect(() => {
dispatch(getLoginAction());
console.log(getLoginAction());
}, [dispatch]);
const [formValues, handleInputChange] = useForm({
usuario: "",
password: "",
options: "",
});
const { usuario, password, options } = formValues;
let users = [
{ value: "1", label: "Usuario 1" },
{ value: "2", label: "Usuario 2" }
];
users.unshift({
value: "",
label: "[ Seleccione una opicón ]"
})
//console.log(users[1].value);
const [captchaValido, cambiarCaptchaValido] = useState(null);
//const [usuarioValido, cambiarUsuarioValido] = useState(false);
const [errorUsuario, setErrorUsuario] = useState(null);
const [errorPassword, setErrorPasword] = useState(null);
const [errorSelect, seterrorSelect] = useState('');
const [errorCredencial, seterrorCredencial] = useState(null);
const captcha = useRef(null);
const onCaptcha = () => {
if (captcha.current.getValue()) {
cambiarCaptchaValido(true);
}
};
const handleSubmit = (e) => {
e.preventDefault();
if (captcha.current.getValue()) {
//cambiarUsuarioValido(true);
cambiarCaptchaValido(true);
} else {
//cambiarUsuarioValido(false);
cambiarCaptchaValido(false);
}
if (!usuario.trim()) {
setErrorUsuario("El campo usuario es requerido");
return;
} else if (!/\S+@\S+\.\S+/.test(usuario)) {
setErrorUsuario("Ingrese un email valido.");
return;
}
if (!password.trim()) {
setErrorPasword("El campo password es requerido");
return;
} else if (
!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[$@$!%*?&])([A-Za-z\d$@$!%*?&]|[^ ]){8,15}$/.test(
password
)
) {
setErrorPasword("Ingrese un formato Valido");
return;
}
if (options === "") {
seterrorSelect("Debe seleccionar una opción");
return;
}
if (user === usuario && pass === password && (cliente_gg === users[1].value || cliente_pv === users[2].value)) {
history.push("/proveedor");
} else {
seterrorCredencial("usuario y contraseña incorrectos");
return;
}
setErrorUsuario(null);
setErrorPasword(null);
seterrorCredencial("");
seterrorSelect('');
};
return (
<>
<div>
<form onSubmit={handleSubmit}>
{errorCredencial ? (
<span className="text-danger">{errorCredencial}</span>
) : null}
<div className="form-group mb-2">
<input
className="form-control"
type="text"
name="usuario"
placeholder="Usuario"
autoComplete="off"
value={usuario}
onChange={handleInputChange}
onBlur={() => setErrorUsuario(null)}
/>
{errorUsuario ? (
<span className="text-danger">{errorUsuario}</span>
) : null}
</div>
<div className="form-group mb-2">
<input
type="password"
name="password"
autoComplete="off"
className="form-control"
placeholder="Password"
value={password}
onChange={handleInputChange}
onBlur={() => setErrorPasword(null)}
/>
{errorPassword ? (
<span className="text-danger">{errorPassword}</span>
) : null}
</div>
<div className="form-group mb-2">
<select
className="form-select"
name="options"
onChange={handleInputChange}
value={options}
onBlur={()=>seterrorSelect('')}
>
{users.map((item) => {
return (
<option key={item.value} value={item.value}>
{item.label}
</option>
);
})}
</select>
{errorSelect ? (
<span className="text-danger">{errorSelect}</span>
) : null}
</div>
<div className="text-center mb-2">
<a href="/#" className="text-decoration-none text-secondary forgot">
Olvidé mi contraseña
</a>
</div>
<div className="recaptcha">
<ReCAPTCHA
ref={captcha}
sitekey="6LebBoUcAAAAAAQrF5ZeUIRn7vGecVJ5FEG5A5Ls"
onChange={onCaptcha}
/>
</div>
{captchaValido === false && (
<div className="text-danger">Por favor acepta el captcha</div>
)}
<div className="d-grid gap-2">
<button type="submit" className="btn bg-button block subtitle">
INGRESAR
</button>
</div>
</form>
<div className="text-center mt-2">
<a href="/#" className="text-decoration questions">
PREGUNTAS FRECUENTES
</a>
</div>
</div>
{/* {usuarioValido && console.log("Redirect o cambia vista")} */}
</>
);
};
//pagina donde se recibe el valor del select
import React, { useEffect } from "react";
import { useDispatch, useSelector } from "react-redux";
import { Logo } from "../components/atoms/Logo";
import { getLogoutAction } from "../redux/auth";
import { useHistory } from "react-router-dom";
export const Proveedores = () => {
const history = useHistory();
const handleLogout = () => {
history.push("/login");
dispatch(getLogoutAction());
};
const dispatch = useDispatch();
const { user, pass, cliente_gg, cliente_pv } = useSelector((store) => store.auth);
//const {gg, pv} = useSelector((store) => store.auth);
useEffect(() => {
localStorage.setItem("user", JSON.stringify(user));
localStorage.setItem("password", JSON.stringify(pass));
localStorage.setItem("cliente", JSON.stringify( cliente_gg || cliente_pv ));
}, [user, pass, cliente_gg, cliente_pv]);
return (
<>
<div className="container">
<div className="row">
<div className="col-6">
<Logo />
</div>
<div className="col-6"></div>
<div className="content-box-internas mt-4">
<span className="nav-item nav-link-text-info">
<p>{user}</p>
<p>{pass}</p>
<p>{'Cliente' ? cliente_gg : cliente_pv }</p>
<button onClick={handleLogout} className="nav-item nav-link btn">
Logout
</button>
</span>
</div>
</div>
</div>
</>
);
};