Saltar al contenido

Cómo implementar vinculantes en reactDec, 24thIn este tutorial dos vías de datos, vamos a aprender acerca del enlace de datos de dos vías …

marzo 13, 2020

 

En este tutorial, vamos a aprender sobre el enlace de datos bidireccionales en aplicaciones reaccionar con ejemplos.

¿Cuál es vinculante dos vías de datos? medios de enlace de datos

Dos

  • los datos que cambió en la vista ha actualizado el estado.
  • Los datos del estado ha actualizado la vista.

vamos a poner en práctica los dos vinculante en reaccionar camino.

class UserInput extends React.Component{

state = {
name:"reactgo" }

handleChange = (e) =>{ this.setState({ name: e.target.value }) }
render(){
return(

{this.state.name}

)
}
}

Dos datos de unión de demostración

En el código anterior, se han unido un controlador de eventos onChange para el elemento de entrada y también atributo de valor está conectado a la this.state.name.so que el atributo de valor siempre se sincroniza con esto. state.name propiedad.

Cada vez que el usuario cambia una entrada en la vista que desencadena el controlador de eventos onChange entonces se llama al método this.setState y actualiza el valor this.state.name propiedad en definitiva es el componente EntradaUsuario re-prestados con el cambios actualizados.

Esto también se denomina componente controlado porque el valor de un elemento de entrada está controlada por el reaccionar.