这是一个看起来很奇怪的共同点。
请参阅处理事件文档中的详细信息
// This binding is necessary to make `this` work in the callback
this.handleClick = this.handleClick.bind(this);
handleClick() {
console.log('this is:', this);
}
<button onClick={this.handleClick}>
如果不添加()behind this.handleClick，则需要this在构造函数中进行绑定，否则，您可能需要使用以下两种方法：
A.公共类字段语法
默认情况下在Create React App 中启用
handleClick = () => {
console.log('this is:', this);
}
<button onClick={this.handleClick}>
B. 箭头函数
这可能会导致性能问题，不推荐使用，请参阅上面的文档。
// The same on event handling but different in:
<button
onClick={(e) => this.deleteRow(id, e)} // automatically forwarded, implicitly
/>
<button
onClick={this.deleteRow.bind(this, id)} // explicitly
/>
样本
基本上在我们的实践中，我们使用带有参数的公共类字段语法，如下所示：
// No need to bind `this` in constructor
// Receiving params passed by elements as well as getting events of it
handler = (value: ValueType) => (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {
// Do something with passed `value` and acquired `event`
}
<NumberFormat
...
onBlur={this.handler(someValue)} // Passing necessary params here
/>
我们可以handler function通过向它传递不同的参数来共享。
// Justify via keyword of stored content in flat data structure
handler = (value: string) => (event: React.ChangeEvent<HTMLInputElement>, id: ValidationItems) => {
// Do something with
// passed `value`,
// acquired `event`,
// for each element diffenced via `id`
};
<YourComponent
id="ID_1"
value={store.name1}
onChange={this.handler("name1")}
/>;
<YourComponent
id="ID_2"
value={store.name2}
onChange={this.handler("name2")}
/>;
// ... more similar input text fields