綁定（本）在ReactJS和的onChange更新狀態

Question

我有以下代碼：

index.js

class App extends React.Component { 
    constructor() { 
     super(); 
     this.state = { 
      homeLink: "Home" 
     }; 
    } 

    onGreet() { 
     alert("Hello!"); 
    } 

    onChangeLinkName(newName) { 
     this.setState({ 
      homeLink: newName 
     }); 
    } 

    render() { 
     return (
      <div className="container"> 
       <div className="row"> 
        <div className="col-xs-10 col-xs-offset-1"> 
         <Header homeLink={this.state.homeLink}/> 
        </div> 
       </div> 
       <div className="row"> 
        <div className="col-xs-10 col-xs-offset-1"> 
         <Home 
          name={"Max"} 
          initialAge={27} 
          greet={this.onGreet} 
          changeLink={this.onChangeLinkName.bind(this)} 
          initialLinkName={this.state.homeLink} 
         /> 
        </div> 
       </div> 
      </div> 
     ); 
    } 
} 

而且 Home.js

export class Home extends React.Component { 
    constructor(props) { 
     super(); 
     this.state = { 
      age: props.initialAge, 
      status: 0, 
      homeLink: props.initialLinkName 
     }; 
    } 

    onMakeOlder() { 
     this.setState({ 
      age: this.state.age + 3 
     }); 
    } 

    onChangeLink() { 
     this.props.changeLink(this.state.homeLink); 
    } 

    onHandleChange(event) { 
     this.setState({ 
      homeLink: event.target.value 
     }); 
    } 

    render() { 
     return (
      <div> 
       <p>In a new Component!</p> 
       <p>Your name is {this.props.name}, your age is {this.state.age}</p> 
       <p>Status: {this.state.status}</p> 
       <hr/> 
       <button onClick={() => this.onMakeOlder()} className="btn btn-primary">Make me older!</button> 
       <hr/> 
       <button onClick={this.props.greet} className="btn btn-primary">Greet</button> 
       <hr/> 
       <input type="text" value ={this.state.homeLink} 
         onChange={(event) => this.onHandleChange(event)}/> 
       <button onClick={this.onChangeLink.bind(this)} className="btn btn-primary">Change Header Link</button> 
      </div> 
     ); 
    } 
} 

將onChange在當我在input字段中寫入內容並更新至state時，會立即觸發input標記？當我在input字段中寫入內容時，我看不到Chrome中React Developer Tool擴展名中的state更改。

當我點擊按鈕this.onChangeLink它會觸發onChangeLink函數。 onChangeLink似乎沒有任何爭論，因爲這些籃框是空的，我仍然能夠通過this.state.homeLink到this.props.changeLink在onChangeLink函數中。 this.props.changeLink這也是index.js中的函數，其參數爲newName。我猜這是bind(this)的問題。bind(this)是做什麼的？我可以使用胖箭頭功能(event) => this.onChangeLink(event)來重寫嗎？

Answer 1

bind是Function.prototype中的函數，它返回一個綁定到當前的this的函數對象。

onClick={this.onChangeLink.bind(this)} 

這裏onClick功能將與當前上下文句柄傳遞。

arrow function根本不創建新的this上下文。 this將涉及定義爲的函數的上下文。

一個箭頭函數不會創建它自己的這個上下文，所以它有它的原始含義來自封閉的上下文。

onChange={(event) => this.onChangeLink(event)} 

這裏即使onChangeLink不綁定，它是一個箭頭的功能在同一個this範圍內調用。

所以..是的，你可以用一個胖箭頭符號替換它來獲得相同的效果。儘管在這種情況下你必須重寫參數列表兩次。

Answer 2

你不需要onChangeLink在Home組件。您可以直接將值傳遞給App組件。

class Home extends React.Component { 
 
    constructor(props) { 
 
     super(); 
 
     this.state = { 
 
      age: props.initialAge, 
 
      status: 0, 
 
      homeLink: props.initialLinkName 
 
     }; 
 
    } 
 

 
    onMakeOlder() { 
 
     this.setState({ 
 
      age: this.state.age + 3 
 
     }); 
 
    } 
 

 
    onHandleChange(event) { 
 
     this.setState({ 
 
      homeLink: event.target.value 
 
     }); 
 
    } 
 

 
    render() { 
 
    
 
     return (
 
      <div> 
 
       
 
       <input type="text" value ={this.state.homeLink} 
 
         onChange={(event) => this.onHandleChange(event)}/> 
 
       <button onClick={()=>this.props.changeLink(this.state.homeLink)} className="btn btn-primary">Change Header Link</button> 
 
      </div> 
 
     ); 
 
    } 
 
} 
 

 
class App extends React.Component { 
 
    constructor() { 
 
     super(); 
 
     this.state = { 
 
      homeLink: "Home" 
 
     }; 
 
    } 
 

 
    onGreet() { 
 
     alert("Hello!"); 
 
    } 
 

 
    onChangeLinkName(newName) { 
 
     this.setState({ 
 
      homeLink: newName 
 
     }); 
 
    } 
 

 
    render() { 
 
    console.log(this.state) 
 
     return (
 
      <div className="container"> 
 
       <div className="row"> 
 
        <div className="col-xs-10 col-xs-offset-1"> 
 
         
 
        </div> 
 
       </div> 
 
       <div className="row"> 
 
        <div className="col-xs-10 col-xs-offset-1"> 
 
         <Home 
 
          name={"Max"} 
 
          initialAge={27} 
 
          greet={this.onGreet} 
 
          changeLink={this.onChangeLinkName.bind(this)} 
 
          initialLinkName={this.state.homeLink} 
 
         /> 
 
        </div> 
 
       </div> 
 
      </div> 
 
     ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById("app"))

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