es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

  • es.davy.ai/
  • Programación /
  • ¿Cómo puedo obtener el valor de la casilla de verificación y el valor del botón en esta situación? ¿Alguien tiene alguna sugerencia?

¿Cómo puedo obtener el valor de la casilla de verificación y el valor del botón en esta situación? ¿Alguien tiene alguna sugerencia?

25 Jul, 2023 Programación

Quiero obtener el valor de la casilla “gender” y del botón en el div rect1, y reaccionar al valor “male”, “female” y “customer”, “shop”. ¿Cómo puedo obtenerlo?
Intenté gender == "male" o “female” pero devuelve falso
¿Qué debo cambiar?

function Register() {
  const [username,setUsername]= useState("");
  const [password,setPassword]= useState("");
  const [email,setEmail]= useState("");
  const [phone,setPhone]= useState("");
  const [gender,setGender]= useState("");
  const [role,setRole]= useState("");
  const [error, setError]= useState("");
  let history = useHistory();
  const register = (e) => {
    e.preventDefault();
    axios.post("http://localhost:5001/api/auth/register", 
    {username,
    email,
    phone,
    password,
    gender,
    role,
    }).then((response)=> {
      console.log("response", response)
      localStorage.setItem("login", JSON.stringify({
        userLogin: true,
        token: response.data.access_token,
      }));
      setError("");
      setUsername("");

      setPassword("");
      setGender("");
      setRole("");
      history.push("/login");
    }).catch(error =>setError(error.response.data.message));
  };
    return (
        <input type="radio" name="gender" value="{male}" onchange="{(e)="> setGender(e.target.value)}/>
        <label for="male"></label>
        <span>Male</span>
        <input type="radio" name="gender" value="{female}" onchange="{(e)="> setGender(e.target.value)}/>
        <label for="female"></label>
        <span>Female</span>

    <div class="rect1">
      <button class="button" type="button" value="{shop}" onchange="{(e)="> setRole(e.target.value)}><img src=""><em>URL + /Images/shop 1.png} /></em></button>
    </div>
    <div class="rect2">
      <button class="button" type="button" value="{customer}" onchange="{(e)="> setRole(e.target.value)}> <img src="">URL + /Images/take-away.png} /></button>

Gracias por ayudarme.

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Para obtener el valor del checkbox de género y el botón en el div rect1, puedes usar el hook de estado para almacenar los valores y luego recuperarlos al manejar la función de registro.

    En primer lugar, debes asegurarte de que los valores asignados a los checkboxes y al botón coincidan con los valores que esperas. Por lo tanto, necesitas actualizar tu código de la siguiente manera:

    <input type="radio" name="gender" value="male" onchange="{(e)="> setGender(e.target.value)}/>
<label for="male"></label>
<span>Male</span>
<input type="radio" name="gender" value="female" onchange="{(e)="> setGender(e.target.value)}/>
<label for="female"></label>
<span>Female</span>
...
<div class="rect1">
  <button class="button" type="button" value="shop" onchange="{(e)="> setRole(e.target.value)}>
    <img src="{process.env.PUBLIC_URL" +="" `/images/shop="" 1.png`}="">
  </button>
</div>
<div class="rect2">
  <button class="button" type="button" value="customer" onchange="{(e)="> setRole(e.target.value)}>
    <img src="{process.env.PUBLIC_URL" +="" `/images/take-away.png`}="">
  </button>
</div>

    Ahora, puedes acceder a los valores de género y rol llamando a los hooks de estado en la función de registro de esta manera:

    const register = (e) => {
  e.preventDefault();
  axios.post("http://localhost:5001/api/auth/register", {
    username,
    email,
    phone,
    password,
    gender,
    role,
  })
  .then((response) => {
    console.log("response", response);
    localStorage.setItem("login", JSON.stringify({
      userLogin: true,
      token: response.data.access_token,
    }));
    setError("");
    setUsername("");
    setPassword("");
    setGender("");
    setRole("");
    history.push("/login");
  })
  .catch((error) => setError(error.response.data.message));
};

    Esto recuperará los valores de género y rol, y los incluirá en la llamada a la API.

    Nota: También puedes intentar usar console.log(gender) y console.log(role) antes de realizar la llamada a la API para asegurarte de que los valores se estén configurando correctamente.

Comments are closed.