3 回答

TA貢獻1895條經驗 獲得超7個贊
官方文件反應使用:
... handleClick = handleClick.bind(this)...
但我認為,使用以下內容也更好:從“反應”中導入React;
class Bar extends React.Component { constructor(props) { super(props); this.state = {}; } handleClick = () => { //Do some stuff } render(){ return( <div onClick={this.handleClick}> Bar </div>) }}export default Bar;
使用第二種方法,您不必關心使用.bind()
。

TA貢獻1770條經驗 獲得超3個贊
我沒有看到你提到的第二種方式,并且不建議這樣做,因為它將為每個渲染創(chuàng)建一個新函數(shù)。
我這樣做的方式是這樣的:
class Foo extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
handleClick = () => {
//Do some stuff
}
render(){
return(
<div onClick={this.handleClick}>
Foo
</div>)
}
}
export default Foo;
這樣,您不需要構造函數(shù)中的綁定,但該函數(shù)仍然只創(chuàng)建一次。

TA貢獻1900條經驗 獲得超5個贊
你的第一種方法,使用你在構造函數(shù)中綁定的原型函數(shù),除了你缺少的東西之外是好的this
:
this.handleClick = this.handleClick.bind(this);
你的第二種方法是在每個渲染中創(chuàng)建一個新函數(shù)render
。這使得handleClick
為測試目的而難以模擬。
您經??吹降牡谌N方法涉及在構造函數(shù)中在構造時創(chuàng)建箭頭函數(shù):
this.handleClick = event => { // ...};
或使用財產聲明:
class Bar extends React.Component { handleClick = event => { // ... };}
這些都具有相同的模擬/可測試性問題。
除此之外,他們沒事。
添加回答
舉報