I've wrote a lot of form in React, and this is probably the most time consuming part of react development to me. I've tried a lot of library and wrote a lot of helpers.
My question is: Why the following technic is under-rated ? What's the downside ?
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>;
}
Note:
- I understand that controlled input has a lot of value, but that's also a small part of inputs, making every single input controlled for marginal feature is overkill to me.
- I didn't push it to the limit, just exploring some code and that one is so minimal and simple (I didn't try checkbox or radio but that also can be encapsulate in helpers or library).
EDIT: This does not disallow to control some of the inputs, this is just a different way to parse form values on submit to send to the server. I could use a controlled input without name and put the computed result in an hidden field and let an helper do the job on submit using the action and method form attribute.