Detailed explanation of the use of component events in React

This time I will bring you a detailed explanation of the use of component events in React. What are the precautions for using component events in React. Here are practical cases, let’s take a look.

Events and ref

Events can be written directly to DOM nodes, and then get the DOM nodes through 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 preview

Event object——event

React will pass a formal parameter events by default when calling the event method. The object is a synthetic event, so there is no need to worry about browser compatibility issues.

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

Event - this pointer

In all events, you must first figure out where this points to. In React events (such as the above case), the default this is undefined. In order for the this pointer to correctly point back to the component object itself, the following methods can usually be used.

Use arrow functions for event definition

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

Use arrow functions for event calls

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

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

in the constructor

When calling the event, use 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)}/>
    }
}

Pass parameters from the event

Use the arrow function when calling the event

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

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

When calling the event, I believe I saw it You have mastered the method in the case of this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of the steps to highlight the selected li in react

Detailed explanation of the steps to use the interface in JS

The above is the detailed content of Detailed explanation of the use of component events in React. For more information, please follow other related articles on the PHP Chinese website!