Unidirectional data binding of React

single data binding

in Vue, two-way data binding can be achieved through the v-model instruction. However, there is no concept of instructions in React, and React does not support bidirectional data binding by default.

React only supports the transfer of data from the state to the page, but it cannot automatically transfer the data from the page to the state for storage.

React, only single data binding is supported, not bidirectional data binding. If you don't believe me, let's look at the following example:

import React from "react";

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      msg: "this is the default msg for MyComponent components"
    };
  }

  render() {
    return (
      <div>
        <h3>Test component</h3>
        <input type="text" value={this.state.msg} />
      </div>
    );
  }

}

In the code above, we try to read the value of state.msg in the input text box, but a warning pops up in the run result:

Warning: Failed prop type: You provided a `value` prop to a form field without an `onChange` handler. This will render a read-only field. If the field should be mutable use `defaultValue`. Otherwise, set either `onChange` or `readOnly`.

Bidirectional data binding is implemented through the onChange method

if you bind value attributes to a form element, you must also bind readOnly for the form element, or provide the onChange event:

if you bind readOnly, it means that the element is read-only and cannot be modified. At this point, the console will not pop up a warning.
if you are binding onChange, it means that the value of this element can be modified, but you have to define the logic of the modification yourself.

The example of

binding readOnly is as follows: (indicates that the data in value is read-only)

	<input type="text" value={this.state.msg} readOnly />

an example of binding onChange is as follows : (bidirectional data binding through onChange method)

(1)index.html:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>
  <!-- the container, the virtual DOM rendered through React, will be rendered to this location-->
  <div id="app"></div>
</body>

</html>

（2）main.js:

// JS package entry file
// 1. Import package
import React from "react";
import ReactDOM from "react-dom";

// Import components
import MyComponent from "./components/MyComponent.jsx";

// use the render function to render the virtual DOM
ReactDOM.render(
  <div>
    <MyComponent></MyComponent>
  </div>,
  document.getElementById("app")
);

（3）components/MyComponent.jsx

import React from "react";

export default class MyComponent extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      msg: "this is the default msg for the component"
    };
  }

  render() {
    return (
      <div>
        <h1>Test component</h1>
        <input
          type="text" value={this.state.msg} onChange={this.txtChanged} ref="txt" />
        <h3>{"Real-time display of content in msg:" + this.state.msg}</h3>
      </div>
    );
  }

  // bind the txtChanged event to the text box
  txtChanged = (e) => {
    // get<input>There are 3 ways of text in a text box:
    // method 1: use document.getElementById

    // method 2: use ref
    // console.log(this.refs.txt.value);

    // method 3: use the parameter e of the event object to get it.
    // at this point, e.target represents the event source object that triggered the event, and the result is a native JS DOM object. In this case, e.target is a text box.
    // console.log(e.target.value);
    this.setState({
      msg: e.target.value
    });
  };
}