Foros del Web » Programando para Internet » Javascript » Frameworks JS »

Localstorage Undefined

Estas en el tema de Localstorage Undefined en el foro de Frameworks JS en Foros del Web. Estimados estoy realizando la validacion y de un select option el cual ya funciona correctamente, y hace su trabajo lo que nesecito es al escojer ...
  #1 (permalink)  
Antiguo 28/09/2021, 20:35
 
Fecha de Ingreso: febrero-2007
Mensajes: 232
Antigüedad: 15 años, 7 meses
Puntos: 1
Localstorage Undefined

Estimados estoy realizando la validacion y de un select option el cual ya funciona correctamente, y hace su trabajo lo que nesecito es al escojer un valor del select me guarde su valor seleccionado en el localstorage la llave sale pero el valor me marca undefined, no se que estoy haciendo mal si alguien puede dar una mano en ver que estoy fallando, Gracias.

Código:
import React, { useRef, useState } from "react";
import Swal from "sweetalert2";
import { useForm } from "../../hooks/useForm";
import ReCAPTCHA from "react-google-recaptcha";
import { useDispatch, useSelector } from "react-redux";
import { startLoginEmailPassword } from "../../redux/actions/auth";
export const FormLogin = () => {
  const dispatch = useDispatch();

  const { loading } = useSelector((state) => state.ui);

  const [formValues, handleInputChange] = useForm({
    email: "",
    password: "",
    options:""
  });
  const { email, password, options } = formValues;

  let users = [
    { value: "1", label: "Usuario 1" },
    { value: "2", label: "Usuario 2" },
  ];

  users.unshift({
    value: "",
    label: "[ Seleccione una opicón ]",
  });


  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 handleSelectChange = () => (e) => {
    let val = e.target.value;
    localStorage.setItem("item_id", `${val}`);
    if (!val) console.log("No ha seleccionado ninguna opción");
    else console.log(`El valor seleccionado es ${val}`);
  }; */

 
  const captcha = useRef(null);
  const onCaptcha = () => {
    if (captcha.current.getValue()) {
      cambiarCaptchaValido(true);
    }
  };

  const handleSubmit = (e) => {
    e.preventDefault();

    let optForm = document.forms["form"]["options"].selectedIndex;
    if( optForm === null || optForm === 0 ) {
      seterrorSelect("Debe seleccionar una opción en el campo");
      return false;					
    } else {
      let val = e.target.value;
      localStorage.setItem("item_id", JSON.stringify(val));
    }
    
    if (captcha.current.getValue()) {
      //cambiarUsuarioValido(true);
      cambiarCaptchaValido(true);
    } else {
      //cambiarUsuarioValido(false);
      cambiarCaptchaValido(false);
    }

    if (!email.trim()) {
      setErrorUsuario("El campo usuario (email) es requerido");
      return;
    } else if (!/\[email protected]\S+\.\S+/.test(email)) {
      setErrorUsuario("Ingrese un email valido.");
      return;
    }

    if (!password.trim()) {
      setErrorPasword("El campo password es requerido");
      return;
    } else if (
      !/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[[email protected]$!%*?&])([A-Za-z\[email protected]$!%*?&]|[^ ]){8,15}$/.test(
        password
      )
    ) {
      setErrorPasword("Ingrese un formato Valido");
      return;
    }

    setErrorUsuario(null);
    setErrorPasword(null);
    seterrorSelect(null);

    dispatch(startLoginEmailPassword(email, password));
  };

  return (
    <>
      <div>
        <form name="form" onSubmit={handleSubmit}>
          <div className="form-group mb-2">
            <input
              className="form-control"
              type="text"
              name="email"
              placeholder="Email"
              autoComplete="off"
              value={email}
              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"
              value={options}
              onChange={handleInputChange}
              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="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
              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"
              disabled={loading}
            >
              INGRESAR
            </button>
          </div>
        </form>

        <div className="text-center mt-2">
          <a href="/#" className="text-decoration questions">
            PREGUNTAS FRECUENTES
          </a>
        </div>
      </div>
    </>
  );
};

Última edición por cualquiera; 28/09/2021 a las 21:29

Etiquetas: javascript
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 08:08.