Veo que tienes dudas sobre "buenas prácticas" en React. Todas ellas se pueden despejar si:
De preferencia tomarle mayor atención a artículos de personalidades que manejan bien el tema.
Hacer un submit en React es igual que en VanillaJS, no hay mayor misterio. Si bien en React los eventos no son nativos, a nivel de funcionalidad no hay mayores diferencias.
<form onSubmit={this.onSubmit.bind(this)}>
<input type="text" value={this.state.name} onChange={this.onInputChange.bind(this)} />
<button type="submit">Enviar nombre</button>
</form>
...
onInputChange (e) {
this.setState({ name: e.target.value });
}
onSubmit (e) {
fetch (`localhost:3000/api/categories/create/${this.state.name}`, {
method: 'POST'
})
.then(res => res.json())
.then(res => {
if (res.success) { // exito
alert('Categoría creada');
}
});
}
Cuando tratamos con formularios por lo general tendemos a hablar de componentes controlados y no controlados. Un componente no controlado es un elemento autocontrolado sin depender ni estar sincronizado con un contexto. Puedes pensar en un <input type="text" value="Hola"/>
como un componente no controlado.
Por otro lado, un componente controlado es aquel que es controlado por un contexto, manteniéndose siempre sincronizado con éste, por ejemplo: <input type="text" value={this.state.name} onChange={this.onInputChange.bind(this)} />
. En éste enlace puedes ver un post que habla de ésto.
Hacer un componente controlado tiene muchas ventajas en comparación de un no controlado; ergo, no es un "debe ser", si no un "podría ser". Algunas ventajas para formularios son:
- validación instantánea
- cambio de estado automáticamente (por ejemplo, en el caso de un botón)
- forzar un formato de entrada (e incluso cambiarlo en tiempo real)