He escrito muchos formularios en React, y esta es probablemente la parte del desarrollo de React que me lleva más tiempo. Probé muchas bibliotecas y escribí muchos ayudantes.

Mi pregunta es: ¿Por qué la siguiente técnica está subestimada? ¿Cuál es el inconveniente?

 export default function ExampleForm() { const onSubmit = React.useCallback((evt)=> { evt.preventDefault(); const form = evt.target; var name = form.elements['name'].value; var content = form.elements['content'].value; console.log(name, content); // make something with the values. }); return <form onSubmit={onSubmit}> <h1>Example form</h1> <div> <label htmlFor="name">Your name</label> <input type="text" id="name" name="name" /> </div> <div> <label htmlFor="content">Content</label> <textarea id="content" name="content"></textarea> </div> <div> <input type="submit" value="Send" /> </div> </form>; }

Nota:

• Entiendo que la entrada controlada tiene mucho valor, pero eso también es una pequeña parte de las entradas, hacer que cada entrada controlada por característica marginal sea exagerada para mí.
• No lo presioné hasta el límite, solo exploré un código y ese es tan mínimo y simple (no probé la casilla de verificación o la radio, pero eso también se puede encapsular en ayudantes o biblioteca).

EDITAR: Esto no impide controlar algunas de las entradas, esta es solo una forma diferente de analizar los valores del formulario al enviarlos al servidor. Podría usar una entrada controlada sin nombre y poner el resultado calculado en un campo oculto y dejar que un ayudante haga el trabajo al enviar usando el atributo de formulario de acción y método.