如何为反应组件方法绑定“this”

Question

我不明白为什么this.click = this.click.bind(this)需要它以及它在做什么。

class MyComponent extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                name: 'Initial State'
            };
            this.click = this.click.bind(this);
        }
        click() {
            this.setState({
                name: 'React Rocks!'
            });
        }
        render() {
        return (
            <div>
            <button onClick = {this.click}>Click Me</button>
            <h1>{this.state.name}</h1>
            </div>
        );
      }
    };

Answer 1

如果你没有使用bind()，当this.click()从事件侦听器调用的值this会不会是你的阵营组件（如state和props等都是），而是this将功能this.click()本身。通常，每次调用函数时，执行上下文 - 的值this- 都会设置为函数本身。

当然，如果你想访问 React 组件的上下文，这不是一件好事。bind()为确保函数运行与您的组件相同执行环境，让您进入一个办法this.state，this.props等你的函数里面。另一种方法是使用 ES6 箭头函数声明：

let foo = () => {console.log("bar")}

这会自动将thisfor的值设置为foo声明函数的任何上下文。如果您foo在与 React 组件相同的上下文中声明，它将保留该上下文，从而确保 的值this在 内部相同foo。