如何绑定方法

Question

我正在尝试创建一个计数器按钮，但我不能。我知道它与绑定有关但我找不到解决方案。我尝试使用.bind（this），但它不起作用。

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

的变化：

1。在主要组件的构造函数中绑定handleClick方法。

2。名称不匹配，您传递handleClick方法，但您定义了clickHandler。将clickHandler替换为handleClick。

检查工作代码段：

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)，以便this引用该组件而不是undefined。

请注意，这不是特定于React，而是JavaScript类方法的默认行为，它们不会自动绑定。

此外，您在处理程序定义中使用不同的名称以及在模板中使用它时。

＆＃13;

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

如果您使用Babel's class property transform，您可以按如下方式声明处理程序，它将自动绑定：

class Main extends React.Component {

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

    constructor(props) { ... }

    render() { ... }
}