El enlace de datos en React se puede lograr mediante el uso de una controlled input . Se logra una entrada controlada vinculando el valor a una state variable y un evento onChange para cambiar el estado a medida que cambia el valor de entrada.

Vea el siguiente fragmento

 class App extends React.Component { constructor() { super(); this.state = { value: 'Hello World' }; } handleChange = (e) => { this.setState({ value: e.target.value }); }; render() { return ( <div> <input type="text" value={this.state.value} onChange={this.handleChange} /> <p>{this.state.value}</p> </div> ); } } ReactDOM.render(<App />, document.getElementById('app'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script> <div id="app"></div>

Actualización: ganchos de reacción

Aquí hay un componente de función equivalente de la clase definida anteriormente.

 const { useState } = React; const App = () => { const [value, setValue] = useState('Hello World'); const handleChange = (e) => setValue(e.target.value); return ( <div> <input type="text" value={value} onChange={handleChange} /> <p>{value}</p> </div> ); }; ReactDOM.render(<App />, document.getElementById('app'));

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script> <div id="app"></div>

Para ser breve, en React, no hay enlace de datos bidireccional.

Entonces, cuando desee implementar esa función, intente definir un state y escriba así, escuchar eventos, actualizar el estado y React renderiza por usted:

 class NameForm extends React.Component { constructor(props) { super(props); this.state = {value: ''}; this.handleChange = this.handleChange.bind(this); } handleChange(event) { this.setState({value: event.target.value}); } render() { return ( <input type="text" value={this.state.value} onChange={this.handleChange} /> ); } }

Detalles aquí https://facebook.github.io/react/docs/forms.html

ACTUALIZACIÓN 2020

Nota :

LinkedStateMixin está obsoleto a partir de React v15. La recomendación es establecer explícitamente el valor y cambiar el controlador, en lugar de usar LinkedStateMixin.

actualización anterior del sitio oficial de React. Use el código a continuación si está ejecutando bajo v15 de React; de lo contrario , no lo haga.

En realidad, hay personas que desean escribir con enlace bidireccional, pero React no funciona de esa manera. Si quieres escribir así, debes usar un complemento para React, como este:

 var WithLink = React.createClass({ mixins: [LinkedStateMixin], getInitialState: function() { return {message: 'Hello!'}; }, render: function() { return <input type="text" valueLink={this.linkState('message')} />; } });

Detalles aquí https://facebook.github.io/react/docs/two-way-binding-helpers.html

Para refs , es solo una solución que permite a los desarrolladores llegar al DOM en los métodos de un componente, consulte aquí https://facebook.github.io/react/docs/refs-and-the-dom.html

Con la introducción de los ganchos React , la gestión del estado (incluido el estado de los formularios) se volvió muy simple y, en mi opinión, mucho más comprensible y predecible en comparación con la magia de otros marcos. Por ejemplo:

 const MyComponent = () => { const [value, setValue] = React.useState('some initial value'); return <input value={value} onChange={e => setValue(e.target.value)} />; }

Este flujo unidireccional hace que sea trivial comprender cómo se actualizan los datos y cuándo ocurre la representación. Simple pero poderoso para hacer cosas complejas de manera predecible y clara. En este caso, haga un enlace de estado de forma "bidireccional".

El ejemplo utiliza el valor de cadena primitivo. Gestión de estados complejos, p. Los objetos, las matrices, los datos anidados también se pueden administrar de esta manera, pero es más fácil con la ayuda de bibliotecas, como Hookstate (Descargo de responsabilidad: soy el autor de esta biblioteca). Aquí está el ejemplo de gestión de estado complejo .

Cuando un formulario crece, hay un problema con el rendimiento de la representación: el estado del formulario cambia (por lo que es necesario volver a presentar) en cada pulsación de tecla en cualquier campo de formulario. Hookstate también aborda este problema. Este es el ejemplo del formulario con 5000 campos : el estado se actualiza en cada almacén de claves y no hay ningún retraso en el rendimiento.