我目前正在學習 react 并遵循視頻教程,但我遇到了一個無法傳遞給另一個方法的物件,但是當我傳遞一個 ID 時,它作業正常
這是方法
handleIncrement = (product) => {
console.log(product);
this.setState({ count: this.state.count 1 });
};
這是我嘗試傳遞的方法
render() {
return (
<div>
<span className={this.getBadgeClasses()}>{this.formatCount()}</span>
<button
onClick={this.handleIncrement({ id: 1 })}
className="btn btn-secondary btn-sm"
>
Increment
</button>
</div>
);
onClick={this.handleIncrement(product)}錯誤的產品未定義
src\components\counter.jsx
Line 19:47: 'product' is not defined no-undef
但如果我使用onClick={() => this.handleIncrement({ id:1 })}它作業得很好,并且在我使用時也作業onClick={(product) => this.handleIncrement(product)}
uj5u.com熱心網友回復:
你遇到的問題是
onClick={this.handleIncrement({ id: 1 })}
這是 ReactJS 新手的常見困惑,但這是一般的經驗法則,您有兩種方法
- 如果您的功能不期望
parameter
funcWithoutParam = () => {
console.log('hi')
};
onClick={this.funcWithoutParam}
- 如果您的功能正在等待
parameter
handleIncrement = (param) => {
console.log(param)
}
onClick={() => this.handleIncrement({ id: 1 })}
uj5u.com熱心網友回復:
該onClick事件處理程式必須是一個函式,而不是一個函式呼叫。這就是為什么您提供的示例可以onClick={() => this.handleIncrement({ id:1 })}作業,因為這是一個匿名函式,而您呼叫該函式的示例不起作用。
轉載請註明出處,本文鏈接:https://www.uj5u.com/qita/367815.html
標籤:javascript 反应 目的 方法
