Obtenga el valor de un campo de entrada en React

1. Cómo funcionan las entradas en React
2. Obtenga el valor del campo de entrada en React 16
3. Obtenga el valor del campo de entrada en React usando Hooks
4. Cómo manejar formularios grandes con docenas de entradas

Manejar las entradas del usuario es una de las claves para desarrollar aplicaciones dinámicas de React. Trabajar con las entradas del usuario le permite responder a sus acciones y brindar una experiencia de usuario superior.

Cuando se trabaja en React, es bueno almacenar las entradas del usuario en las propiedades del estado para establecer una única fuente de verdad. Esto le permite interactuar fácilmente con los datos y manipularlos cuando sea necesario.

Siempre que cambia el estado, React actualiza automáticamente el componente para reflejar los cambios más recientes.

Cómo funcionan las entradas en React

Antes de continuar, debemos entender cuándo y por qué React decide volver a renderizar un componente.

Primero, la interfaz de usuario de la aplicación se actualiza (se vuelve a renderizar) cuando cambia su estado interno. Cualquier evento de usuario, como seleccionar una opción diferente o marcar / desmarcar un campo, puede cambiar el estado y provocar una nueva representación.

En segundo lugar, la re-renderización ocurre cuando se produce un cambio en los props del componente, que se recibe del padre. En algunos casos, el componente padre proporciona valores prop de su estado.

React usa JSX, que se parece mucho a HTML, pero funciona de manera diferente.

Es importante tener en cuenta que cuando crea un elemento <input> en JSX, no está creando el elemento <input> HTML, sino un objeto input de React que se parece mucho a él. Se reproduce de manera similar al elemento HTML input e imita su interfaz de manejo de eventos, pero por lo demás es independiente.

Las aplicaciones de React se componen de elementos de la interfaz de usuario, que obtienen sus valores del estado del componente. Como se mencionó anteriormente, cambiar la entrada es una de las formas más comunes de cambiar el estado y, por extensión, los elementos visuales representados en la página.

Sin embargo, lo importante a tener en cuenta es que el estado es la única fuente de verdad en las aplicaciones React. La interfaz de IU tiene una función secundaria.

Obtenga el valor del campo de entrada en React 16

Desde el lanzamiento de React 16, los desarrolladores pueden crear componentes de la clase React utilizando una sintaxis de clase legible. Tenga en cuenta que debe vincularlos en la función constructora o llamarlos usando la sintaxis de flecha para que funcionen los controladores de eventos, como en el ejemplo siguiente.

class App extends Component {
  constructor(props){
    super(props)
    this.state = {
      enteredValue: ""
    }
  }
  render() {
    console.log(this.state.enteredValue)
    return <input type="text"
                  onChange={(event) => this.setState({enteredValue: event.target.value})}>
           </input>;
  }
}

En general, es más legible y conveniente utilizar la sintaxis de flechas. También hace que las aplicaciones sean más fáciles de depurar.

Puede verificar el código de reproducción usted mismo y ver que cada vez que usted (también conocido como el usuario) ingresa algo nuevo en el campo de entrada, el valor del estado se actualiza y luego se registra en la consola (para fines de demostración).

Obtenga el valor del campo de entrada en React usando Hooks

Los componentes funcionales son incluso más fáciles de escribir y leer que los componentes de clase. Este tipo de componente es solo una función que acepta props como argumento.

Hasta hace unos años, los componentes funcionales también se denominaban componentes sin estado o tontos y se utilizaban principalmente para visualizar los datos.

Desde React 16.8, los componentes funcionales han obtenido acceso a muchas características nuevas, incluidos los ganchos. Ahora los desarrolladores pueden usar el gancho useState() para mantener un estado en un componente funcional.

Este gancho le permite obtener una variable de estado y la función para actualizarla. Ya no tiene que usar la API .setState() directamente en los componentes funcionales.

Así es como se vería la misma aplicación si estuviera construida con componentes funcionales:

function App(props){
  let [inputValue, setInputValue] = useState("")
  console.log(inputValue)
  return <input type="text"
            onChange={(event) => setInputValue(event.target.value)}>
         </input>;
}

El gancho useState() funciona de una manera muy simple. Una vez llamado, devuelve una variable de estado asignada al inputValue y una función para actualizarlo.

Tener una función distinta para actualizar cada variable puede ser beneficioso desde una perspectiva de legibilidad. Como podemos ver, setInputValue tiene un nombre bastante descriptivo.

El argumento pasado al gancho useState() (cadena vacía) se utilizará como valor inicial para la variable de estado inputValue.

Como puede ver, esta definición es mucho más clara y funciona tan bien como un componente de clase. Los componentes funcionales suelen ser la mejor opción siempre que necesite un componente con solo unas pocas variables para almacenar el valor del estado.

Aún así, en algunos casos, los componentes de clase son necesarios y diferentes de los componentes funcionales. Para obtener más información sobre las diferencias, lea la documentación oficial de React.

Cómo manejar formularios grandes con docenas de entradas

Como mencionamos antes, necesita una variable de estado para cada elemento de entrada de la interfaz de usuario para mantener el valor ingresado por los usuarios. No es inusual que los formularios tengan docenas de entradas, incluso cientos. ¿Debería crear una variable de estado separada para todos ellos?

La solución es simple y está en línea con la lógica general de React. En lugar de tener estas entradas en un componente grande, debe dividirlas en piezas conectadas lógicamente creando componentes pequeños separados.

Luego, puede importarlos y usarlos para construir su formulario grande. De esta manera, los componentes más pequeños solo son responsables de almacenar y mantener algunas entradas.

Las aplicaciones estructuradas de esta manera son más legibles y fáciles de mantener. Otros desarrolladores que trabajan en su código le agradecerán por escribir código simple y comprensible.