06-React的单向数据绑定

单项数据绑定

在 Vue 中，可以通过 v-model 指令来实现双向数据绑定。但是，在 React 中并没有指令的概念，而且 React 默认不支持 双向数据绑定。

React 只支持，把数据从 state 上传输到 页面，但是，无法自动实现数据从 页面 传输到 state 中 进行保存。

React中，只支持单项数据绑定，不支持双向数据绑定。不信的话，我们来看下面这个例子：

  1. import React from "react";
  3. export default class MyComponent extends React.Component {
  4.   constructor(props) {
  5.     super(props);
  7.     this.state = {
  8.       msg: "这是 MyComponent 组件 默认的msg"
  9.     };
  10.   }
  12.   render() {
  13.     return (
  14.       <div>
  15.         <h3>呵呵哒</h3>
  16.         <input type="text" value={this.state.msg} />
  17.       </div>
  18.     );
  19.   }
  21. }

上方代码中，我们尝试在 input文本框中读取 state.msg 的值，运行结果中，却弹出了警告：

20190213_2000.png

  1. 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`.

通过onChange方法，实现双向数据绑定

如果针对 表单元素做 value 属性绑定，那么，必须同时为 表单元素 绑定 readOnly, 或者提供 onChange 事件：

  • 如果是绑定readOnly，表示这个元素只读，不能被修改。此时，控制台就不会弹出警告了。

  • 如果是绑定onChange，表示这个元素的值可以被修改，但是，要自己定义修改的逻辑。

绑定readOnly的举例如下：（表示value中的数据是只读的）

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

绑定 onChange 的举例如下：（通过onChange方法，实现双向数据绑定）

(1)index.html:

  1. <!DOCTYPE html>
  2. <html lang="en">
  4. <head>
  5.   <meta charset="UTF-8">
  6.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  8.   <title>Document</title>
  9. </head>
  11. <body>
  12.   <!-- 容器，通过 React 渲染得到的 虚拟DOM，会呈现到这个位置 -->
  13.   <div id="app"></div>
  14. </body>
  16. </html>

（2）main.js:

  1. // JS打包入口文件
  2. // 1. 导入包
  3. import React from "react";
  4. import ReactDOM from "react-dom";
  6. // 导入组件
  7. import MyComponent from "./components/MyComponent.jsx";
  9. // 使用 render 函数渲染 虚拟DOM
  10. ReactDOM.render(
  11.   <div>
  12.     <MyComponent></MyComponent>
  13.   </div>,
  14.   document.getElementById("app")
  15. );

（3）components/MyComponent.jsx

  1. import React from "react";
  3. export default class MyComponent extends React.Component {
  4.   constructor(props) {
  5.     super(props);
  7.     this.state = {
  8.       msg: "这是组件 默认的msg"
  9.     };
  10.   }
  12.   render() {
  13.     return (
  14.       <div>
  15.         <h1>呵呵哒</h1>
  16.         <input
  17.           type="text" value={this.state.msg} onChange={this.txtChanged} ref="txt" />
  18.         <h3>{"实时显示msg中的内容：" + this.state.msg}</h3>
  19.       </div>
  20.     );
  21.   }
  23.   // 为 文本框 绑定 txtChanged 事件
  24.   txtChanged = (e) => {
  25.     // 获取 <input> 文本框中 文本的3种方式：
  26.     //  方式一：使用 document.getElementById
  28.     //  方式二：使用 ref
  29.     // console.log(this.refs.txt.value);
  31.     //  方式三：使用 事件对象的 参数 e 来拿
  32.     // 此时，e.target 就表示触发 这个事件的 事件源对象，得到的是一个原生的JS DOM 对象。在这个案例里，e.target就是指文本框
  33.     // console.log(e.target.value);
  34.     this.setState({
  35.       msg: e.target.value
  36.     });
  37.   };
  38. }

工程文件：