バインディング：誰かが私にこの権利を手伝うことができますか？

Question

私はスキルに反応し、これを行うことによって、私はこの甘いコードラインを見つけました。

export default class SearchBar extends Component { 

    constructor(props) { 
    super(props); 
    this.state({term:''}); 

    this.onInputChange = this.onInputChange.bind(this); 
    } 

    onInputChange(event) { 
    this.setState({ term: event.target.value}); 
    } 
} 

ここでJSXの一部

render() { 
    return(<input 
    value={ this.state.term } 
    onChange={ this.onInputChange } 
    />) 
} 

は、あなたは私が本当にラインで何が起こっているのかを理解することができる場所、ソースを教えてくれたり、私を示して/助けてくださいことはできますか？

this.onInputChange = this.onInputChange.bind(this); 

それは私を混乱させます。あなたの助けてくれてありがとう。 種類について

Answer 1

あなたはバインディングが必要な理由を理解するためにthisブログを通過できます。

この方法をバインドするには、stage-1 Babel presetをインストールし、矢印機能を使用することをお勧めします。矢印関数はを自動的にバインドします。したがって、bind（）関数を使用する必要はありません。

もっと分かりやすいように、thisブログを読むことができます。矢印機能付

あなたのコードは次のようになります。

export default class SearchBar extends Component { 

    constructor(props) { 
    super(props); 
    this.state({term:''}); 
    } 

    onInputChange = (event) => { 
    this.setState({ term: event.target.value}); 
    } 
} 

render() { 
    return(
    <input 
     value={this.state.term} 
     onChange={this.onInputChange} 
    /> 
) 
} 

今、あなたは、バインド文の新しい機能が追加されるたびに追加する必要はありません。