Explication détaillée de l'utilisation des événements de composants dans React

Cette fois, je vais vous apporter une explication détaillée de l'utilisation des événements de composants dans React. Quelles sont les précautions lors de l'utilisation des événements de composants dans React. Voici des cas pratiques, jetons un coup d'œil. Les événements

et ref

peuvent être écrits directement sur les nœuds DOM, puis utiliser ref pour obtenir le nœud DOM

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

Aperçu de l'effet

objet événement— — événement

React transmettra un paramètre formel events par défaut lors de l'appel de la méthode événementielle. Cet objet est un événement synthétique, vous n'avez donc pas à vous soucier des problèmes de compatibilité du navigateur.

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

événement - ce pointeur

Dans tous les événements, vous devez d'abord déterminer où this pointe. Dans les événements React (comme dans le cas ci-dessus), la valeur par défaut this est all undefined Pour que le pointeur this pointe correctement vers l'objet composant lui-même, les méthodes suivantes peuvent généralement être utilisées.

Utilisez la fonction flèche lors de la définition de l'événement

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

Utilisez la fonction flèche lors de l'appel de l'événement

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

Utilisez bind dans le constructeur

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

Utiliser la liaison lors de l'appel de l'événement

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

Passer les paramètres à l'événement

Utiliser la fonction flèche lors de l'appel de l'événement

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

Utilisez bind lors de l'appel de l'événement

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

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php. !

Lecture recommandée :

Explication détaillée des étapes pour mettre en évidence le li sélectionné dans React

Explication détaillée des étapes utiliser les interfaces en JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!