Reactでイベントオブジェクトを渡す方法

react でイベント オブジェクトを渡すメソッド: 1. "{(e) => this.deleteRow(id, e)}" を使用して渡します; 2. "{this.deleteRow.bind(this)" を渡します, id)}」メソッド。

このチュートリアルの動作環境: Windows7 システム、react17.0.1 バージョン、Dell G3 コンピューター。

推奨: "Javascript 基本チュートリアル"

パラメーター (イベント オブジェクト) をイベント ハンドラーに渡します

function 追加パラメーター: 次の 2 つのメソッド

<button onClick={(e) => this.deleteRow(id, e)}>Delete Row</button>
<button onClick={this.deleteRow.bind(this, id)}>Delete Row</button>

上記の 2 つのメソッドは同等であり、それぞれアロー関数と Function.prototype.bind を通じて実装されます。

上記の 2 つの例では、React イベント オブジェクトとしてのパラメーター e が 2 番目のパラメーターとして渡されます。アロー関数を使用すると、イベント オブジェクトを明示的に渡す必要がありますが、バインドを使用すると、イベント オブジェクトとその他のパラメーターが暗黙的に渡されます。

バインド メソッドを介してリスニング関数にパラメータを渡す場合、クラス コンポーネントで定義されたリスニング関数については、イベント オブジェクト e が渡されたパラメータの後ろにランク付けされる必要があることに注意してください。次に例を示します。

class Popper extends React.Component{
    constructor(){
        super();
        this.state = {name:'Hello world!'};
    }
    
    preventPop(name, e){    //事件对象e要放在最后
        e.preventDefault();
        alert(name);
    }
    
    render(){
        return (
            <div>
                <p>hello</p>
                {/* Pass params via bind() method. */}
                <a href="https://reactjs.org" onClick={
                this.preventPop.bind(this,this.state.name)
                }>Click</a>
            </div>
        );
    }
}

プログラミング関連の知識については、プログラミング学習をご覧ください。 ！

以上がReactでイベントオブジェクトを渡す方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。