React add event

React adds events, similar to DOM, but slightly different

For React to add an event, please note:

1. The event of react is named by camel case, and DOM is named by pure lowercase;

2. When using JSX syntax, you need to pass in a function as the event processing function, and DOM passes in a string (although the event name passed in DOM can also be the function name, the data type is still a string)

DOM element add event

<a href="#"Onclick =" testclick(); "> Click me</a>

Add event in React

<button onClick={this.testClick}>Click on me</button>

In React, you can't prevent the default behavior of elements by returning false. You can only prevent the default behavior by setting preventDefault() on the display. There are two ways to prevent the default behavior of elements in DOM: one is that inline scripts directly return false, and the other is that event handlers display calls to the preventDefault method

How to block default behavior in DOM:

<a href="http://Www.baidu.com "onclick =" return false; "> Click me</a>
In this way, you can directly return false to prevent the default behavior of a element from skipping, or you can display and call the preventDefault method in response events. For example:
<!--Note that the parameters passed in need to be fixed event,Cannot change to another value-->
<a href="http://www.baidu.com" onclick="testClick(event);">Click on me</a>
<script>
    function testClick(e) {
        console.log("Deal with some other things");
        e.preventDefault();
    }
</script>

How to prevent the default behavior of elements in React:

testClick(e){
    console.log("Deal with other things");
    e.preventDefault();
}
<a href="http://www.baidu.com" onClick={this.testClick}>Click on me</a>

No arguments need to be passed in the event handler

Element binding event in React

There is mainly a problem of this pointing. In the components defined by class inheritance, this in the event processing function does not point to the current component. If we use this directly in the React element, an exception will be reported, because this does not point to the component. Then we need to manually point this to the current component before we can use this, There are four common methods to bind this to the current component:

1. Through arrow function

<a href="http://www.mop.com" onClick={(e) => this.testClick(e)}>Click on me</a>

2. Use arrow function to write event handling function

testClick = (e) => {
    console.log("Deal with something");
    e.preventDefault();
}
<a href="http://www.baidu.com" onClick={this.testClick}>Click on me.</a>

3. Bind at the call place through bind;

<a href="http://www.baidu.com" onClick={this.handleClickEvent.bind(this)}>Click on me</a>

4. Bind in advance in constructor;

    constructor(props) {
        super(props);
        this.state = {
            name: this.props.name,
            date: new Date(),
            id: this.props.id
        };
        this.handleClickEvent = this.handleClickEvent.bind(this);
    }

<a href="http://www.baidu.com" onClick={this.handleClickEvent}>Click on me.</a>

Passing parameters to event handlers

In many operations, we need to pass parameters to the event handler. For example, when deleting or marking a piece of data, we need to pass the ID of the current data to the event handler to let it know which piece of data to process

There are two common ways to transfer values:

1. Way of arrow function

delUser(id, e){
    console.log(id);
}
<a href="http://www.baidu.com" onClick={(e) => this.delUser(this.state.id, e)}>delete</a>

2. Pass parameters to the listener function through bind. Pay attention to the listener function defined in the class component. Event object e should follow the parameters

delUser(id, e){
    console.log(id);
}
<a href="http://www.baidu.com" onClick={this.delUser.bind(this, this.state.id)}>delete</a>

In fact, event object e in the event response function is the last in the parameter list, no matter whether you use arrow function or bind to listen to events to pass parameters

goRenren(id,name, e){
    console.log(id);
    console.log(name);
}
<button onClick={(e) => this.goRenren(this.state.id,this.state.name, e)}>delete</button>

 

Tags: Javascript React

Posted on Tue, 14 Apr 2020 03:45:37 -0700 by genista