在 React 中调用处理函数的最佳方法是什么?

Question

我正在阅读有关处理事件的ReactJs 文档，我想知道在组件中调用处理函数的最佳实践是什么。

我的问题非常简单(我认为甚至是基本的(：onClick={handleClick}或onClick={this.handleClick]之间应该使用什么？

我想知道在看到这两段代码后，在第一段代码中调用了handleClick，在第一个代码中没有关键字this，在第二个代码中调用了 with。

ActionLink() {
function handleClick(e) {
e.preventDefault();
console.log('The link was clicked.');
}
return (
<a href="#" onClick={handleClick}>
Click me
</a>
);
}

class Toggle extends React.Component {
constructor(props) {
super(props);
this.state = {isToggleOn: true};
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
}
handleClick() {
this.setState(state => ({
isToggleOn: !state.isToggleOn
}));
}
render() {
return (
<button onClick={this.handleClick}>
{this.state.isToggleOn ? 'ON' : 'OFF'}
</button>
);
}
}
ReactDOM.render(
<Toggle />,
document.getElementById('root')
);

Answer 1

它们是两种不同的情况。

• onClick={handleClick}用在功能组件中，在函数this键工作是指调用函数时的位置，你不要在功能组件中使用this。
• onClick={this.handleClick]用于类组件。在类中，您需要使用this键工作来访问类属性，在这种情况下是函数。