Question

我发现一些网站关于反应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')

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

React做自动绑定吗？如果答案是＆＃39;是＆＃39;，有时你需要在某些情况下手动绑定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值，而是绑定到当前上下文的词汇。

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

响应自动绑定点击是自动的

3 个答案: