Detaillierte Erläuterung der Verwendung von Komponentenereignissen in React

Dieses Mal werde ich Ihnen die Verwendung von Komponentenereignissen in React ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Komponentenereignissen in React? Hier ist ein praktischer Fall.

Ereignisse und Ref

Ereignisse können direkt in DOM-Knoten geschrieben werden und dann den DOM-Knoten über Ref abrufen

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'));

Effektvorschau

Ereignisobjekt - event

React übergibt standardmäßig einen formalen Parameter events, wenn die Ereignismethode aufgerufen wird. Bei diesem Objekt handelt es sich um ein synthetisches Ereignis, sodass Sie sich keine Sorgen über Browserkompatibilitätsprobleme machen müssen.

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')
)

Ereignis – dieser Zeiger

In allen Ereignissen müssen Sie zunächst herausfinden, wohin this zeigt. Bei React-Ereignissen (wie im obigen Fall) ist der Standardwert this all undefined. Damit dieser Zeiger korrekt auf das Komponentenobjekt selbst verweist, können normalerweise die folgenden Methoden verwendet werden.

Ereignisdefinition verwendet Pfeilfunktion

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}/>
    }
}

Ereignisaufruf verwendet Pfeilfunktion

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)}/>
    }
}

Konstruktor verwendet bind

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}/>
    }
}

Beim Aufrufen des Ereignisses , verwenden Sie bind

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)}/>
    }
}

Übergeben Sie Parameter aus dem Ereignis

Verwenden Sie die Pfeilfunktion, wenn Sie das Ereignis aufrufen

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)}/>
    }
}

Verwenden Sie bind

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

Wenn Sie das Ereignis aufrufen, Ich glaube, ich habe es gesehen. Sie haben die Methode in diesem Artikel gemeistert. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Ausführliche Erklärung der Schritte zur Auswahl der Li-Hervorhebung in React

Detaillierte Erklärung der Schritte zu Verwenden Sie Schnittstellen in JS

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Verwendung von Komponentenereignissen in React. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!