Question

我是React的新手，刚刚开始阅读学习React 免费电子书的道路。无论如何，本书中有一部分说它为了在类方法中访问 this ，我们需要将类方法绑定到 this 。在那里提供的一个例子清楚地表明：

class ExplainBindingsComponent extends Component {
    onClickMe() {
      console.log(this);
    }
    render() {
      return (
         <button
           onClick={this.onClickMe}
            type="button"
           >
          Click Me
        </button>
    );
  }
}

单击该按钮时，此未定义，如果我添加了一个构造函数：

constructor() {
  super();
  this.onClickMe = this.onClickMe.bind(this);
}

我可以在方法中访问 this 。但是，我现在感到困惑，因为我正在查看一个没有绑定且此可访问的示例：

class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
       list,
    };

  }

  onDismiss(id) {
    console.log(this);
    const updatedList = this.state.list.filter(item => item.objectID !== id);
    this.setState({list: updatedList});
  }

  render() {
    return (
      <div className="App">
        {this.state.list.map(item => 
             <div key={item.objectID}>
                <span>
                  <a href={item.url}>{item.title}</a>
                </span>
                <span>{item.author}</span>
                <span>{item.num_comments}</span>
                <span>{item.points}</span>
                <span>
                     <button
                         onClick={() => this.onDismiss(item.objectID)}
             type="button"
                     > 
             Dismiss
                     </button>
                </span>
              </div>
        )}
      </div>
    );
  }
}

在 onDismiss 里面我可以毫无问题地打印这个，虽然我没有绑定它？这与第一个例子有什么不同？

Answer 1

这四个字符的原因：

 () =>

这是一个箭头功能。与常规函数不同，它们没有自己的上下文（又名this），而是取其父元素（在这种情况下为render()）且具有正确的上下文。

Answer 2

当您使用() =>声明为函数时，它会自动将自身绑定到this。

看看这里： https://hackernoon.com/javascript-es6-arrow-functions-and-lexical-this-f2a3e2a5e8c4

在React中绑定类方法

2 个答案: