Shulou(Shulou.com)06/01 Report--

This article mainly introduces the example analysis of React event system and form operation, which is very detailed and has certain reference value. Friends who are interested must read it!

The event system of 1.react

The react event system complies with the W3school standard, has no IE compatibility issues, and has the same API interface as native browser events. The bubbling mechanism of the event is also supported, and we can use stopPropagation () and preventDefault () to terminate it.

All events are automatically bound to the outermost layer. If you need to access the native event object, you can use the nativeEvent property.

two。 Composite event

(1) event delegation

React binds all events to the outermost layer of the structure, using an agreed event listener that maintains a mapping to hold event listeners and handlers within all components.

(2) automatic binding

In a react component, the context of each method points to an instance of the component, which automatically binds this as the current component. However, this automatic binding no longer exists when using ES6 classes or pure functions, and the binding of this needs to be implemented manually.

(3) binding method

3-1:bind method: it can help us bind the this in the event handler and pass parameters to the event handler, such as:

3-2 declaration within the constructor (recommended): bind the event within the constructor of the component.

3-3 Arrow function: it automatically binds the this that defines the scope of this function.

3. Primary event

ComponenDidMount will be called after the component has been installed and the browser has a real DOM, and we can complete the binding to the native event.

Note: when using DOM native events in react, be sure to remove them manually when the component is unloaded, otherwise memory leaks may occur.

4. Mixed event

We cannot bind events to areas outside the scope of the component, we can only do so using native events.

However, try to mix synthetic events with native DOM events in React: it is not possible to use reactEvent.nativeEvent.stopPropagatoin () to prevent events from bubbling. The behavior of organizing bubbling of React events is only applicable to the React synthesis system, and there is no way to prevent the bubbling of native events. On the other hand, preventing event bubbling in native events can prevent the spread of React events.

The above is all the contents of the article "sample Analysis of React event system and form actions". Thank you for reading! Hope to share the content to help you, more related knowledge, welcome to follow the industry information channel!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.