bind(): si sta vincolando un metodo componente al componente. React fa questo automaticamente?

Question

ottengo questo avvertimento da reactJS.NET

bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call. See LikeCon

Componente assomiglia a questo

var LikeCon = React.createClass({ 
    handleClick: function() { 
      var data = new FormData(); 
      var like = !this.state.like; 
      var likeCounter = this.state.likeCount; 

      data.append("catgoryType", this.state.categoryKey); 
      data.append("objectId", this.state.objectId); 
      data.append("like", like); 

      if(like) 
       likeCounter++; 
      else 
       likeCounter--; 

      this.setState({ like: like, likeCount: likeCounter, userId: this.state.userId, categoryKey: this.state.categoryKey, objectId: this.state.objectId}); 

      var xhr = new XMLHttpRequest(); 
      xhr.open("post", "http://localhost:2215/Home/SetLike", true); 
      xhr.onload = function() { 
     }; 
     xhr.send(data); 
    }, 
    getInitialState: function() { 
     return { like: this.props.initialLike, likeCount: this.props.initialLikeCount, userId: this.props.userId, categoryKey: this.props.categoryKey, objectId: this.props.objectId }; 
    }, 
    render(){ 
     return this.renderLikeButton() 
    }, 
    renderLikeButton(){ 
     return (
       content = 
       <div className="likeCon"> 
        <div className={this.state.like==true ? "likeButConAct" : "likeButCon"}> 
         <div className="likeB" title={this.state.like==true ? "Unlike" : "Like"} onClick={this.handleClick.bind(this)} > 
          &nbsp; 
         </div> 
         { this.state.likeCount > 0 ? <div className="likeCount">{this.state.likeCount}</div>: null} 

        </div> 
       </div> 
      ); 
    } 
}) 

I utilizza un vicolo cieco quando si chiama il metodo handleClick, Se rimuovo questo mi metterò un'altra eccezione? Quindi cosa dovrei fare?

Answer 1

Passaggio *.bind(null,this) invece;

Vedere this Google Groups thread per la spiegazione.

Answer 2

Rimuovi "content =" o creare un div involucro:

<div>  content = 
      <div className="likeCon"> 
       <div className={this.state.like==true ? "likeButConAct" : "likeButCon"}> 
        <div className="likeB" title={this.state.like==true ? "Unlike" : "Like"} onClick={this.handleClick.bind(this)} > 
         &nbsp; 
        </div> 
        { this.state.likeCount > 0 ? <div className="likeCount">{this.state.likeCount}</div>: null} 

       </div> 
      </div> 
</div> 

Avete bisogno di un elemento principale nel codice HTML di ritorno.

Answer 3

Da v0.4 React AutoBind per te. Vedi https://facebook.github.io/react/blog/2013/07/02/react-v0-4-autobind-by-default.html Quindi non c'è bisogno di legare se stessi

Answer 4

reagire automaticamente associa metodi a questo metodo di chiamata. Ciò è utile perché consente di passare direttamente le funzioni. quindi per evitare questo messaggio è sufficiente passare null anziché this. riferimento: AutoBind

Answer 5

Si dovrebbe capire che obiettivo bind raggiungere, e lo spiegherò qui.

In primo luogo, prova a pensare a chi chiamerà handleClick? vale a dire ci dovrebbe essere qualche codice come xxx.handleClick, xxx importa, perché quando si chiama this.setState all'interno handleClick, this riferiscono a xxx, e setState esistono solo in React component, così xxx dovrebbe fare riferimento al component per ottenere quello che cosa, è per questo che .bind(this) a handleClick, al fine di impostare this a React Component all'interno handleClick

Così ora, tornare alla mia prima domanda, se non si imposta this esplicitamente, ciò che è xxx, in pianura javascript callback onClick è globale che significa non c'è xxx, quindi this dovrebbe fare riferimento all'oggetto globale, ad esempio window se sono corretto. Tuttavia React impostare il xxx a React Component in un modo magico, che è il motivo per cui non è necessario impostare in modo esplicito

Answer 6

Nel mio caso, in precedenza ho questo,

<input placeholder="URL" id="txt_url" className="form-control" 
     value={this.state.url} onChange={this.handleChange.bind(this)}/> 

Rimozione che .bind chiamata risolto

<input placeholder="URL" id="txt_url" className="form-control" 
     value={this.state.url} onChange={this.handleChange}/>