Estoy tratando de seguir un modelo de presentación simple, es decir, no tiene estado.

El problema es que si uso una etiqueta de entrada u otro control de formulario, la única forma de que ese componente se actualice a sí mismo es usando el estado: ¿es esto correcto?

Esto significa que cualquier componente que tenga solo 1 etiqueta de entrada se vería obligado a ser un componente con estado en lugar de un sin estado, solo por la forma en que funciona reaccionar y hacer que la etiqueta de entrada se actualice mientras el usuario escribe.

¿Hay una alternativa?

Aunque estoy usando ganchos que son más limpios y me permiten usar un componente funcional mediante el uso de «useState», todavía va a tener estado.

Ahora que aparecieron los ganchos, ¿estamos diciendo que todos los componentes funcionales pueden mantener el estado? No parece correcto

¿O es solo el caso de que, debido a la forma en que funciona la reacción, cualquier componente que tiene una etiqueta de entrada se convierte automáticamente en un componente con estado?

Por supuesto, lo que podría hacer es pasar los valores predeterminados a través de accesorios y pasar los valores a un componente superior (mi componente con estado real), pero esto parece un largo camino para hacer esto.

Tenía la esperanza de tener alguna idea de lo que debería ser una forma de lograr un componente sin estado que tenga una etiqueta de entrada, o siempre debemos pasar los valores al componente padre, o es un efecto secundario que cuando un componente tiene una etiqueta de entrada almacenaría un estado mínimo (usando useState por ejemplo, en ganchos)

Algunas ideas ?

Use componentes no controlados

class NameForm extends React.Component { constructor(props) { super(props); this.handleSubmit = this.handleSubmit.bind(this); this.input = React.createRef(); } handleSubmit(event) { alert('A name was submitted: '   this.input.current.value); event.preventDefault(); } render() { return ( {amp}lt;form onSubmit={this.handleSubmit}{amp}gt; {amp}lt;label{amp}gt; Name: {amp}lt;input type="text" ref={this.input} /{amp}gt; {amp}lt;/label{amp}gt; {amp}lt;input type="submit" value="Submit" /{amp}gt; {amp}lt;/form{amp}gt; ); } } 

Estos usan referencias para obtener el valor actual de entrada en lugar de mantener un estado para ello.

En lugar de administrar esa entrada en el componente, debe pasarle una devolución de llamada, por ejemplo. una tienda redux o similar. De esta manera, el componente de formulario se desacopla de la lógica detrás de esa entrada y se convierte simplemente en una presentación:

 const Form = callback ={amp}gt; { const inputRef = React.createRef(); const handleInput = event ={amp}gt; { event.preventDefault(); callback(inputRef.current.value); }; return ( {amp}lt;form onSubmit={handleInput}{amp}gt; {amp}lt;input type="text" ref={inputRef} /{amp}gt; {amp}lt;button{amp}gt;Submit{amp}lt;/button{amp}gt; {amp}lt;/form{amp}gt; ); }; export default Form;