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

React two-way data binding principle, I believe that many inexperienced people do not know what to do, so this paper summarizes the causes of the problem and solutions, through this article I hope you can solve this problem.

If you have studied Vue and have a deep understanding of Vue's two-way data binding, you will understand that the core of Vue 2.0 two-way data binding is actually data hijacking and snooping through Object.defineProperty.

In Vue 3.0, the listening of the whole object and the optimization of Vue2.0 are realized by Proxy.

What is two-way data binding

Two-way binding between the data model and the view.

When the data changes, the view changes, and when the view changes, the data changes synchronously; it can be said that the user's changes on the view will be automatically synchronized to the data model. The data model is the same.

The advantages of two-way data binding: there is no need for CRUD (Create,Retrieve,Update,Delete) operations like one-way data binding, and two-way data binding is most commonly used on the form, so that when the user completes the input on the front-end page, without any operation, we have already got the data entered by the user and put it into the data model.

Implement two-way data binding

However, there is no bidirectional data binding mechanism in React, and we need to implement it ourselves.

Data affects the view

In fact, React has helped us to do this, using the setState ({}) method to modify the data.

(the modification method provided within React), it is not allowed to pass this.state. The method of attribute name = data is modified by the data.

Code

Import React, {Component} from 'react';// introduced the antd UI library import {Button} from' antd'; class Home extends Component {constructor (props) {super (props); this.state = {inputVal:'',} } setValue= () = > {this.setState ({inputVal: "modify Value"})} render () {return (Home component)

{this.state.inputVal}

{/ * antd UI library * /} is used to modify data);}} export default Home

Effect.

View influence data

Dynamic data entry is realized through onChage snooping events provided by React

At the same time, render the content in the input box using value or defaultValue

To facilitate display, the p tag is used to display the content

Code

Import React, {Component} from 'react';import {Button} from' antd'; / / antd UI library class Home extends Component {constructor (props) {super (props); this.state = {inputVal:'',} } change = (ev) = > {this.setState ({inputVal:ev.target.value})} render () {return (Home component)

  {this.state.inputVal}

);} export default Home

Effect.

Note:

When using value binding, only one of value and defaultValue can be used, otherwise a warning will be issued

After reading the above, have you mastered the principle of binding React two-way data? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

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.