Como parte del inicio de sesión, tengo una entrada condicional que no responde; Puedo concentrarme en él, pero solo puedo escribir un poco muy rápido después de hacer clic, pero el valor se borra. También intenté agregar alrededor sin suerte. Todas las entradas no condicionales funcionan normalmente.
https://codesandbox.io/s/frosty-wu-y5do4c
import React, { useState } de "react";
const EventSignUp = (props) => { let [email, setEmail] = useState(""); let [name, setName] = useState(""); let [zip, setZip] = useState(""); let [agreeTerms, setAgreeTerms] = useState(false); let [rememberMe, setRememberMe] = useState(false); let [country, setCountry] = useState(""); const InputCountry = () => { return ( <div> <input placeholder="Country" type="country" name="country" onChange={(e) => setCountry(e.target.value)} /> </div> ); }; return ( <form id="form_login_email" method="post"> <input placeholder="Name*" type="name" name="name" onChange={(e) => setName(e.target.value)} /> <input placeholder="E-mail*" type="email" name="email" onChange={(e) => setEmail(e.target.value)} /> <input placeholder="E-mail again*" type="email" name="email" onChange={(e) => setEmail(e.target.value)} /> <input placeholder="Zip/Postal Code" type="zip" name="zip" onChange={(e) => setZip(e.target.value)} /> <InputCountry /> </form> ); }; export default EventSignUp;Mueva InputCountry fuera del componente EventSignup, porque cada vez que se ingresaba un valor dentro de la entrada de país, se volvía a representar y recrear el componente. Además, se agregó un apoyo de valor en la entrada del país para que sea una entrada controlada.
import React, { useState } from "react"; const InputCountry = ({ country, setCountry }) => { return ( <div> <input placeholder="Country" type="country" name="country" value={country} onChange={(e) => setCountry(e.target.value)} /> </div> ); }; const EventSignUp = (props) => { let [email, setEmail] = useState(""); let [name, setName] = useState(""); let [zip, setZip] = useState(""); let [agreeTerms, setAgreeTerms] = useState(false); let [rememberMe, setRememberMe] = useState(false); let [country, setCountry] = useState(""); return ( <form id="form_login_email" method="post"> <input placeholder="Name*" type="name" name="name" onChange={(e) => setName(e.target.value)} /> <input placeholder="E-mail*" type="email" name="email" onChange={(e) => setEmail(e.target.value)} /> <input placeholder="E-mail again*" type="email" name="email" onChange={(e) => setEmail(e.target.value)} /> <input placeholder="Zip/Postal Code" type="zip" name="zip" onChange={(e) => setZip(e.target.value)} /> <InputCountry country={country} setCountry={setCountry} /> </form> ); }; export default EventSignUp;