Enlace de datos en React

Hola, hallamos la respuesta a tu búsqueda, deslízate y la verás un poco más abajo.

Solución:

El enlace de datos en React se puede lograr mediante el uso de un controlled input. Una entrada controlada se logra vinculando el valor a un state variable y un onChange event 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 (
      

        
        
this.state.value
      
    );
  


ReactDOM.render(, document.getElementById('app'));

---

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 (
    

      
      
value
    
  );
;

ReactDOM.render(, document.getElementById('app'));

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

Entonces, cuando desee implementar esa función, intente definir un statey escribe así, escucha eventos, actualiza el estado y React renderiza por ti:

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 (
      
    );
  

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 else no.

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 ;
  
);

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

Para refses 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  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 usa la primitiva string valor. 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.

Si te ha resultado de ayuda este post, sería de mucha ayuda si lo compartieras con otros desarrolladores de este modo nos ayudas a difundir nuestro contenido.

---

---

Utiliza Nuestro Buscador