メソッドをバインドする方法

Question

カウンタボタンを作成しようとしていますが、できません。私はバインディングとは何かを知っていますが、私は解決策を見つけることができません。私は.bind（これ）を使用してみましたが、動作しません。

class Button extends React.Component{ 
 
    render(){ 
 
    return(
 
     <button onClick={this.props.localHandleClick}>+1</button> 
 
    ) 
 
    } 
 
} 
 
class Result extends React.Component{ 
 
    render(){ 
 
    return (
 
     <div>{this.props.localCounter}</div> 
 
    ) 
 
     
 
    } 
 
} 
 
class Main extends React.Component{ 
 
    constructor(props){ 
 
    super(props); 
 
    this.state={ 
 
     counter:0 
 
    } 
 
    } 
 
    clickHandler(){ 
 
    this.setState({counter:     
 
    this.state.counter+1}); 
 
    } 
 
    render(){ 
 
    return(
 
     <div> 
 
     <Button localHandleClick={this.handleClick}/> 
 
     <Result localCounter={this.state.counter} />   
 
     </div> 
 
    ) 
 
     
 
    } 
 
} 
 
ReactDOM.render(
 
    <Main />, 
 
    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>

Answer 1

変更：

主成分のコンストラクタで結合​​方法。

2.​​メソッドを渡していますが、clickHandlerを定義しています。 clickHandlerを​​で置き換えます。

チェック作業スニペット：thisはundefinedであるのではなく、コンポーネントを参照するように

class Button extends React.Component{ 
 
    render(){ 
 
    return(
 
     <button onClick={this.props.localHandleClick}>+1</button> 
 
    ) 
 
    } 
 
} 
 

 
class Result extends React.Component{ 
 
    render(){ 
 
    return (
 
     <div>{this.props.localCounter}</div> 
 
    ) 
 
     
 
    } 
 
} 
 

 
class Main extends React.Component{ 
 
    constructor(props){ 
 
    super(props); 
 
    this.state={ 
 
     counter:0 
 
    } 
 
    this.handleClick = this.handleClick.bind(this); 
 
    } 
 

 
    handleClick(){ 
 
    this.setState({counter: this.state.counter+1}); 
 
    } 
 

 
    render(){ 
 
    return(
 
     <div> 
 
     <Button localHandleClick={this.handleClick}/> 
 
     <Result localCounter={this.state.counter} />  
 
     </div> 
 
    ) 
 
     
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Main />, 
 
    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'/>

Answer 2

はちょうどあなたのハンドラに.bind(this)を使用しています。

これはReactに固有のものではなく、自動的にバインドされないJavaScriptクラスメソッドのデフォルト動作です。

また、ハンドラ定義で、またテンプレートで使用するときに、異なる名前を使用しています。

class Button extends React.Component { 
 

 
    render() { 
 
    return(
 
     <button onClick={this.props.localHandleClick}>+1</button> 
 
    ); 
 
    } 
 
} 
 

 
class Result extends React.Component { 
 

 
    render() { 
 
    return(
 
     <div>{this.props.localCounter}</div> 
 
    ); 
 
    } 
 
} 
 

 
class Main extends React.Component { 
 

 
    constructor(props) { 
 
    super(props); 
 
    
 
    this.state = { 
 
     counter: 0, 
 
    }; 
 
    
 
    this.handleClick = this.handleClick.bind(this) 
 
    } 
 
    
 
    handleClick() { 
 
    this.setState({ 
 
     counter: this.state.counter + 1, 
 
    }); 
 
    } 
 
    
 
    render() { 
 
    return(
 
     <div> 
 
     <Button localHandleClick={ this.handleClick }/> 
 
     <Result localCounter={ this.state.counter } />   
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<Main />, 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>

あなたがBabel's class property transformを使用している場合は、次のようにあなたのハンドラを宣言することができ、それが自動的にバインドされます。

class Main extends React.Component { 

    handleClick =() => { 
     this.setState({ 
      counter: this.state.counter + 1, 
     }); 
    }; 

    constructor(props) { ... } 

    render() { ... } 
}