This article is a study note I wrote when I was learning React. I will record and share it here. This is the seventh article, which mainly introduces event processing in react.

event handling

(1) Specify the event processing function through the onXxx attribute (note the case)

1. React uses custom (synthetic) events instead of native DOM events for the sake of compatibility.

In native js, we add a click event, which is element .onclick. But it is slightly different in react. OnClick is used. The event handling function in react is different from the element js, that is, the letter after on must be capitalized. onClick is react's secondary encapsulation of onclick. It is distinguished from native js syntax for better compatibility.

2. Events in react are handled through event delegation (delegated to the outermost element of the component). In order to be efficient

We still remember the event delegation in JavaScript. React's event processing makes use of this event delegation. If there is a pair of ul tags and there are many li tags in ul, when we add event processing to li, such as a click event, will we add click events to so many li tags one by one? Of course not, we directly add a click event to the outer ul. When the li is clicked, the event bubbles up to the ul, triggering the click event, achieving the results we want, and achieving high efficiency.

Let’s look at the code first:

render() {
     return (//构建虚拟dom
         <div>
             <input ref={this.myRef} type="text" placeholder="点击按钮提示内容" />
             <button onClick={this.showInfo}>点我提示输入的数据</button>
             <input ref={this.myRef2} onBlur={this.showInfo2} type="text" placeholder="失去焦点提示内容" />
         </div>
     )
}

In fact, react adds the event on the input to the outermost div, which is the same as ul and li.

(2) Get the DOM element object where the event occurred through event.target

First of all, when react’s official documentation introduces Refs, the official website says: Don’t overuse Refs. Please look at the case of the previous study notes. We tried to omit a ref. In the case we wrote one: onBlur is the loss of focus event.

Corresponding event method:

showInfo2 = () => {
    alert(this.myRef2.current.value)
}

We have ref in this input and an onBlur event. We give the input a ref identifier, and the showInfo2 method written in the instance implements the event through the ref identifier.

Now we can omit ref and write the event function directly to complete the event. code show as below:

The event method is as follows:

showInfo2 = (event) => {
    alert(event.target.value)
}

We omitted the ref and rewritten the event method. A parameter event is passed into the event method. This parameter is automatically passed in by the event method, which is the tag of the event added. So you can directly operate the label in the event method. event.taget is this dom element object. So we alert(event.target.value) can directly display the value in the input box.

It can be seen that although we omit ref, we can still achieve the effect we want. Therefore, when the event is bound to the element where the event occurs, you can omit the ref, but still complete the operation on this element.

React Study Notes 7-Event Processing

event handling

Guess you like