React でのコンポーネント イベントの使用方法の詳細な説明

今回はReactでコンポーネントイベントを使用する際の注意点について詳しく解説していきます。実際のケースを見てみましょう。

Events と ref

Events は DOM ノードに直接書き込むことができ、DOM ノードは ref

import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
    focusHandler(){
        this.refs.name.focus();
    }
    render(){
        return (
            <p>
                <input type="text" name="name" placeholder="" ref="name"/>
                <input type="button" name="" value="focus" onClick={this.focusHandler} />
            </p>
        );
    }
};
ReactDOM.render(<Component1/>, document.getElementById('p1'));

Effect プレビューを通じて取得されます

Event オブジェクト—event

React はデフォルトでイベントに仮パラメータを渡しますメソッド callevents の場合、このオブジェクトは合成イベントであるため、ブラウザーの互換性の問題を心配する必要はありません。 events，该对象是一个合成事件，所以不需要担心浏览器兼容的问题。

import React from 'react';
import ReactDOM from 'react-dom';
class Component1 extends React.Component{
    submit(e){
        e.target.style.color = 'red'
    }
    render(){
        return <input type="button" value="submit" onClick={this.submit}/>
    }
}
ReactDOM.render(
    <Component1 />,
    document.getElementById('app')
)

事件 —— this 指针

在所有的事件当中，首先都要弄明白 this 指向哪里。而 React 事件中（如上面的案例）默认的 this 都是 undefined

class Component1 extends React.Component{
    submit = (e) => {
        console.log(this)
        e.target.style.color = 'red'
    }
    render(){
        return <input type="button" value="submit" onClick={this.submit}/>
    }
}

イベント - このポインター

すべてのイベントにおいて、最初に this がどこを指しているのかを把握する必要があります。 React イベント (上記の場合など) では、デフォルトの this は、this ポインターがコンポーネント オブジェクト自体を正しく指すようにするために、次のメソッドを使用します。通常は使用できます。

イベントを定義するときにアロー関数を使用する

class Component1 extends React.Component{
    submit(e){
        console.log(this)
        e.target.style.color = 'red'
    }
    render(){
        return <input type="button" value="submit" onClick={(e) => this.submit(e)}/>
    }
}

イベントを呼び出すときにアロー関数を使用する

class Component1 extends React.Component{
    constructor(props){
        super(props)
        this.submit = this.submit.bind(this);
    }
    submit(e){
        console.log(this)
        e.target.style.color = 'red'
    }
    render(){
        return <input type="button" value="submit" onClick={this.submit}/>
    }
}

コンストラクター

バインドを使用する

class Component1 extends React.Component{
    submit(e){
        console.log(this)
        e.target.style.color = 'red'
    }
    render(){
        return <input type="button" value="submit" onClick={this.submit.bind(this)}/>
    }
}

イベントを呼び出すときにバインドを使用する

class Component1 extends React.Component{
    submit(e, n){
        console.log(this, n)
        e.target.style.color = 'red'
    }
    render(){
        return <input type="button" value="submit" onClick={(e) => this.submit(e, 100)}/>
    }
}

イベントを通してパラメータを渡す

イベントを呼び出すときにアロー関数を使用する

    submit(n, e){
        console.log(n)
        e.target.style.color = 'red'
    }
    render(){
        return <input type="button" value="submit" onClick={this.submit.bind(this, 20)}/>
    }
}

イベントを呼び出すときはバインドを使用してください

rrreee

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

react で選択された li を強調表示する手順の詳細な説明

JS でインターフェイスを使用する手順の詳細な説明🎜🎜🎜

以上がReact でのコンポーネント イベントの使用方法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。