1.他のパラメーターなし
return <a href="https://imooc.com/" onClick={this.clickHandler}>
click me
</a>
//当我们没有传任何参数的时候还是可以使用event，即默认追加了一个event参数
clickHandler = (event) => {
event.preventDefault() // 阻止默认行为
event.stopPropagation() // 阻止冒泡
}2.イベントと他のパラメーターを同時に渡す
// 最后追加一个参数，即可接收 event
clickHandler(id, title, event) {
console.log(id, title) // 2 "按钮"
console.log('event', event) //event Class {…}
}
render(){
return(
<button onClick={this.clickHandler.bind(this,2, '按钮')}>点我</button>
)
}コンソール出力のスクリーンショットは次のとおりです。
3.パラメータを渡す矢印関数とバインドするパラメータをバインドする2つの方法の違い
<button onClick = { (e)=> this.handleClick( id,e ) }></button>
<button onClick = { this.handleClick.bind( this,id ) }></button>
上記の2つのメソッドは同等で、箭头函数 および によってそれぞれFunction.prototype.bind 実装されます 。
上記の2つのケースでは、Reactイベントオブジェクト e が2番目のパラメーターとして渡されます。
アロー関数を使用する場合、イベントオブジェクトを明示的に渡す必要があります。
ちなみに bind 、イベントオブジェクトとその他のパラメーターは暗黙的に渡されます。
あなたは私のネイティブのjs転送パラメータを比較するための私の別の記事を見ることができます