Me gustaría establecer el atributo requerido en la entrada según un estado, probé algo como lo siguiente:
const [required, setRequired] = useState(false) return( <form onSubmit={submitHandler}> <input id='name' type='text' required={required} onChange={changeHandler} /> </form> )Por el momento, no puedo enviar el formulario porque todavía se requiere la entrada "incluso si mi estado es falso". ¿Qué me estoy perdiendo? ¡Gracias por adelantado!
Esto terminó siendo más extraño de lo que imaginaba.
required es extraño en HTML. No es necesario configurarlo en un valor booleano; si se pasa a un elemento de entrada, se requiere esa entrada.
Para establecer mediante programación atributos para sus elementos JSX, puede usar el operador de extensión en un objeto que contenga required como clave.
La forma en que logré hacer esto fue con un componente que se veía así:
const Component = () => { const [required, setRequired] = useState({ required: true }); return ( <form> <input id="name" type="text" {...required} onChange={() => { //handleChange }} /> </form> ) } Aquí hay otra discusión interesante de stackOverflow sobre el atributo required .
EDITAR: si desea eliminar el atributo required más tarde, puede establecer la variable de estado en un objeto vacío.
setRequired({});El atributo requerido solo funciona con acciones de formulario predeterminadas. Deberá hacer su propia validación en el controlador. También debe definir explícitamente el atributo de tipo de botón, ya que los botones por defecto son type="submit". Cree una función de validación y pásele los valores de su estado. Devuelve verdadero si la entrada es válida, falso en caso contrario.
Esta podría ser la respuesta que está buscando: https://stackoverflow.com/a/64962453/8044582