Ejemplo de código de enlace bidireccional implementado por React

Prólogo

React.js es muy popular en la actualidad, no se siente cómodo diciendo que sabe desarrollo frontend si no conoce React.js.

Entonces, veamos a continuación sobre la implementación de enlace bidireccional en React.

Uso del enlace bidireccional:

El componente necesita mixins: referencias a LinkedStateMixin. Proporciona un método linkState.

El parámetro es la propiedad de state

El enlace bidireccional se utiliza con valueLink={this.linkState(XX)}

El método linkState devuelve un objeto que tiene una propiedad value, que especifica la propiedad de state.

También hay un método de retroalimentación requestChange, utilizado para modificar state. El parámetro es el nuevo valor

Se puede entender como el método de enlace de onchange. Puede escribirse un objeto linkState, donde el valor es state.XX y en requestChange se utiliza setState() para modificar el valor. Se realiza con valueLink={obj}.

Se puede entender que this.linkState() realiza el enlace de valores especificados y métodos de cambio

La propiedad valueLink realiza el enlace de linkstate.value al método requestChange de binding onChange

Se puede crear un this.linkState('XX') value={XX.value} onchange={fn} dentro del método usando Xx.requestChange(e.target.value)

-------------------------

Conclusión:El método linkState() proporciona el atributo de state y el método de cambio. valueLink={} realiza el enlace de value y el evento de cambio.

A continuación se muestra el código de implementación

/*Enlace bidireccional por defecto del formulario
   * Vincular el evento change de cada input para modificar el state
   * Si el etiqueta tiene más enlaces de enlace, definitivamente no es adecuado
   * Por lo tanto, react me dio una sugerencia, reactLink
   */
   var Box1=React.createClass({
   getInitialState:function(){
    return {
    name:'star',bool:true
    }
   },
   handlNameChange:function(event){
    this.setState({name:event.target.value});
   },handlboolChange:function(event){
    this.setState({bool:event.target.checked});
   },
   render:function(){
    return (
    <div>
     <input type="text" value={this.state.name} onChange={this.handlNameChange}>/>   <br/>
     <input type="checkbox" checked={this.state.bool} onChange={this.handlboolChange}> />
    </div> 
    )
   }
   }) ;
   React.render(<Box1></Box1>,document.querySelector('#div1);
   /*ReactLink solo proporciona un simple embalaje y convenio de setState del modo onchange. Es una abreviatura de la misma
   * 1、Se necesita agregar mixins de referencia
   * 2、Reemplazar el enlace de value con valueLink. Los parámetros se cambian de this.state.XX a this.linkState('XX') y así es suficiente
   */
   /*Análisis de ReactLink
   * LinkedStateMixin agrega un método linkState a los componentes, el parámetro es el nombre del atributo de state.
   * Devuelve un objeto reactlink que contiene el valor actual de state y un callback para cambiar el valor.
   * reactlink puede pasar props entre componentes
   */
   var Box2=React.createClass({
   mezclas:[React.addons.LinkedStateMixin],//agregar referencia
   getInitialState:function(){
    return {
    name:'star',bool:true
    }
   },
   render:function(){//al enlazar propiedades, es necesario usar el método this.linkState para cambiar de value a valueLink
    return (
    <div>
     <input type="text" valueLink={this.linkState('name')} />   <br/>
     <input type="checkbox" checkedLink={this.linkState('bool')} />
    </div>   
    );
   }
   })
   React.render(<Box2></Box2>,document.querySelector('#div2);
   /*principio subyacente
   * el objeto reactlink realmente tiene solo una propiedad value y un método requestChange, el valor de value es el estado. El método realiza la modificación del valor del estado
   * 
   */
   var Box3=React.createClass({
   getInitialState:function(){
    return {
    name:'star',bool:true
    }
   },
   handlnamechange:function(val){
    this.setState({name:val})
   },
   handlboolchange:function(val){
    this.setState({bool:val})
   },
   render:function(){
    var reactlink={
    value:this.state.name,
    requestChange:this.handlnamechange
    }
    var reactlink2={
    value:this.state.bool,
    requestChange:this.handlboolchange
    }
     return(
      <div>
     <input type="text" valueLink={reactlink} />   <br/>
     <input type="checkbox" checkedLink={reactlink}2} />
    </div> 
     )
   }
   });
   React.render(<Box3></Box3>,document.querySelector('#div3);
   /*valuelink
   * En realidad, realiza la vinculación del estado y la modificación del evento de cambio
   * el método requestChange recibe un valor para modificar el estado
   */
   var Box4=React.createClass({
   mezclas:[React.addons.LinkedStateMixin],//agregar referencia
   getInitialState:function(){
    return {
    name:'star',bool:true
    }
   },
   render:function(){
    var valuelink=this.linkState('name');
    var handlenamechange=function(e){
      valuelink.requestChange(e.target.value) 
    }
    var valuelink2=this.linkState('bool');
    var handlenboolchange=function(e){
      valuelink2.requestChange(e.target.checked) 
    }    
    return (
      <div>
     <input type="text" value={valuelink.value} onChange={handlenamechange} />   <br/>
     <input type="checkbox" checked={valuelink2.value} onChange={handlenboolchange} />
    </div> 
    )
   }
   });
   React.render(<Box4></Box4>,document.querySelector('#div4);

------------------------Objeto ReactLink

Se puede pasar al componente hijo:

linkname={this.linkState('name')}

En el componente hijo se puede:

<input type="text" valueLink={this.props.linkname} >

Se utiliza props para referenciar y enlazar a valueLink.

También se puede modificar el valor utilizando this.props.linkname.requestChange().

Sus cambios se sincronizarán con el componente padre y se actualizarán las etiquetas.

Resumen

Esto es todo el contenido de este artículo, esperamos que el contenido de este artículo pueda ayudarle en su aprendizaje o trabajo. Si tiene alguna pregunta, puede dejar un mensaje para intercambiar.

Declaración: El contenido de este artículo se ha obtenido de Internet, es propiedad del autor original, el contenido se ha contribuido y subido por los usuarios de Internet, este sitio no posee los derechos de propiedad, no ha sido editado por humanos y no asume responsabilidad alguna por las leyes relacionadas. Si encuentra contenido sospechoso de infracción de derechos de autor, le invitamos a enviar un correo electrónico a: notice#oldtoolbag.com (al enviar un correo electrónico, reemplace # con @) para denunciar, y proporcione evidencia relevante. Una vez confirmado, este sitio eliminará inmediatamente el contenido sospechoso de infracción.