まとめ
まず第一に、React では、イベントは小さなラクダを通じて要素にバインドされていることがわかっています。
fn = ()=>{
//执行代码
}
button onClick={
this.fn}>111</button>
しかし、Vue の基盤があれば、両者の違いがはっきりとわかります。Vue では、パラメーターを直接 fn に渡すことができます。
しかし、React では次のようにします。
fn = (value)=>{
//执行代码
console.log(value)
}
button onClick={
this.fn('2222')}>111</button>
ページが読み込まれると、2222 が出力されていることがわかります。ただし、ボタンをクリックしても機能しません。
これは、このメソッドがボタンにバインドされていないことを示していますが、ボタンがロードされたときに直接呼び出されます。
そしてこの点もわかりやすいのですが、ReactはVueに対してこれを行うのではなく、直接呼び出して戻り値をonClickにバインドしただけです。したがって、ここでは、イベントがバインドされている場合、関数がバインドされている必要があることを覚えておく必要があります。
問題が理解できたので、メソッドを呼び出すときにパラメーターを渡したい場合はどうすればよいですか?
1.アロー機能
最初の方法は、イベントをボタンにバインドする場合、外側のレイヤーはアロー関数にバインドされ、内側のレイヤーは私たちが書いたメソッドであり、問題を完全に解決できるようです:
speak = (value) =>{
alert(value)
}
<button onClick={
() => {
this.speak('qnmlgbd')}}>说话</button>
アロー関数を介して、定義した speak メソッドが onClick に直接バインドされ、パラメーターが渡されます。
2.関数カリー化
すると、アロー関数がOKなら、メソッド内で直接メソッドを返すようで、問題ありません。
say = (value)=>{
return ()=>{
alert(value)
}
}
<button onClick={
this.say('qnmlgbd')}>说话</button>
このように、onClick をバインドすると、アロー関数を記述する必要がなくなり、見栄えが良くなります。ただ、原理は先ほどの方法と同じです。
3.バインド方法
bind メソッドは、メソッドの this ポイントを変更してメソッドを返すことであることがわかっています。直接呼び出されることはありません。
bind にこの機能がある場合、それを使用してこの問題を解決できます。
loud(value){
alert(value)
}
<button onClick={
this.loud.bind(this,'qnmlgbd')}>说话</button>
ここで注意すべきことは、ラウド メソッドは定義時にアロー関数メソッドを使用しないことです。前の 2 つのメソッドは、定義時にアロー関数メソッドを使用していました。
これは、React でアロー関数を使用せずに関数を定義すると、関数内の this が React コンポーネントではなく、イベントをバインドする要素になるためです。ただし、イベント バインディングに bind メソッドを使用する場合は、この問題を考慮する必要はありません。
最後に、これら 3 つの方法の違いを見てみましょう。
export default class Child extends Component {
say = (value)=>{
return ()=>{
alert(value)
}
}
speak = (value) =>{
alert(value)
}
loud(value){
alert(value)
}
render() {
return (
<div>
<button onClick={
this.say('qnmlgbd')}>说话</button>
<button onClick={
() => {
this.speak('qnmlgbd')}}>说话</button>
<button onClick={
this.loud.bind(this,'qnmlgbd')}>说话</button>
</div>
)
}
}