Question

我知道我可以通过以下几种不同的方式绑定this：

<button onClick={this.onSelect.bind(this, data)}>Button</button>

或

<button onClick={() => this.onSelect(data)}>Button</button>

或

constructor(props) {
   super(props);
   this.onSelect= this.onSelect.bind(this)
}
<button onClick={this.onSelect}>Button</button>

问题是我无法使用第三个选项发送数据。无论如何，还有使用第三种选项并发送数据吗？

Answer 1

class App extends React.Component {
  constructor(props) {
    super(props);
    this.onSelect = this.onSelect.bind(this);
  }

  onSelect(e) {
    alert(e);
  }
  render() {
    return (
      <div className="App">
        <h1>Hello CodeSandbox</h1>
        <button onClick={event => this.onSelect(event)}>Button</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>

您可以在此处使用ES6箭头函数发送数据，这称为匿名函数调用：

constructor(props) {
   super(props);
   this.onSelect= this.onSelect.bind(this)
}
<button onClick={(event) => this.onSelect(event)}>Button</button>

喜欢这个。

Answer 2

使用ES6语法带来的新箭头功能，您可以忘记bind。箭头函数将自动绑定到其类上下文。使您的onSelect成为箭头功能可以解决您的问题。

要发送数据，您可以预配置功能以接收2组参数，第一组是数据，第二组是click事件：

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = { msg: '' }
  }

  onSelect = msg => event => {
    this.setState({ msg })
  }
  
  render() {
    const { msg } = this.state

    return (
      <div className="App">
        <h3>{msg ? 'Yay, data : ' + msg : 'Click it !'}</h3>
        <button onClick={this.onSelect('I sent data !')}>Button</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.3.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.3.2/umd/react-dom.production.min.js"></script>
<div id="root"></div>

绑定并发送到处理程序

2 个答案: