私がやろうとしていることを示すために、2つのサンプルコンポーネントを作成しました。同じクラスからの呼び出しの場合、次のようにできます。
onClick={this.myFunc.bind(this, param1, param2)}
'this'のバインディングをいじる必要なしに、ステートレスコンポーネントから同じことを行うにはどうすればよいですか。
onClick={props.onClick['need to add params']}
import React from 'react';
class BigComponent extends React.Component{
constructor(props){
super(props);
this.handleClick = this.handleClick.bind(this);
}
handleClick(param1, param2){
// do something with parameters
}
render(){
return(
<div>
<SmallComponent handleClick={this.handleClick}/>
</div>
);
}
}
function SmallComponent(props){
return(
<div>
<button onClick={ () => {props.handleClick('value_1', 'value_2')}}></button>
<button onClick={ () => {props.handleClick('value_3', 'value_4')}}></button>
{/* how to do above without arrow functions, because I read that it's not optimized*/}
</div>
);
}
内にコールバックを追加しますthis.myFunc
。
this.myFunc = event => (param1, param2) => { ... do stuff }
トップレベルのコンポーネントでは、次のことができます。
handleClick={this.myFunc}
あなたの子供では、ただしてください:
onClick={handleClick(param1, param2)}
これがお役に立てば幸いです。
または、次の手順を実行できます。
function SmallComponent(props){
const handleClick = (param1, param2) => (event) => props.handleClick(param1, param2);
return(
<div>
<button onClick={handleClick(param1, param2)}></button>
...
);
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加