点击时反应自动绑定是自动的

Question

我在一些网站上发现关于 react autobindig 的矛盾，例如：

第一个链接做手动自动绑定 React, Binding input values

class Post extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      post: this.props.data,
      comment: ''
    };
  }

  render() {
    return <div>
      <input 
        type="text" 
        value={this.state.comment} 
        onChange={ this.handleChange.bind(this) } 
        placeholder="Write a comment..." />

      <button 
        className="button comments" 
        onClick={ this.handleClick.bind(this, this.state.post.id)}>Button</button>
    </div>
    }

  handleClick(postId, e) {
    console.log( postId );
    console.log( this.state.comment );
  }

  handleChange(e) {
    this.setState({ comment: e.target.value });
  }
}

第二个链接做自动 http://buildwithreact.com/tutorial/state

在最后一个链接上：

var CowClicker = React.createClass({
  getInitialState: function() {
    return {
      clicks: 0
    };
  },

  onCowClick: function(evt) {
    this.setState({
      clicks: this.state.clicks + 1
    });
  },

  render: function() {
    return (
      <div>
        <div>Clicks: {this.state.clicks}</div>
        <img
          src="http://s3.bypaulshen.com/buildwithreact/cow.png"
          onClick={this.onCowClick}
          className="cow"
        />
        <p>Click the cow</p>
      </div>
    );
  }
});

ReactDOM.render(
  <CowClicker />,
  document.getElementById('container')

"注意：自动绑定 您可能会惊讶我们不需要将回调作为 this.onCowClick.bind(this) 传递。 （如果没有，请阅读此内容）。这是因为 React 出于性能原因自动绑定组件实例上的方法。在这里阅读更多内容。”

React 自动绑定？如果答案是“是”，有时您需要在某些情况下使用 onclick 手动绑定？？

Answer 1

在 React v0.13 中，引入了 es6 类，并且没有自动绑定。 React v0.4 中引入了自动绑定。

如果您有一些使用 React 版本低于 v0.4 的旧项目，则没有自动绑定。

我也对学习材料感到困惑，我创建了一个 post 来讨论这个问题。

Answer 2

正如用户 @havenchyk 解释的那样，

使用 React.createClass 会自动为我们正确绑定这些值，但是使用 ES6 类时的更改会影响这一点。与 ES6 类略有不同，类的属性不会自动绑定到 React 类实例。

来源：https://toddmotto.com/react-create-class-versus-component/

• 在您的第一个示例中，他们使用的是 ES6 方法。其次，他们使用的是传统的

Answer 3

当你使用 React.createClass 时，为你做绑定。
如果您使用的是 es6 类语法，则不再为您绑定。
这意味着您应该手动执行.bind(this)。

但您可以使用不定义自己的this 值的胖箭头函数，而是将它们绑定到当前上下文的lexical this。

看看http://codepen.io/dagman/pen/wzgvja

class Button extends React.Component {
    handleClick = () => {
        alert('Hello World');
    };
    render() {
        return (
            <button onClick={this.handleClick}>button</button>
        );
    }
}

ReactDOM.render(
    <Button />,
    document.getElementById('mount-node')
);