add:react单向数据绑定

13-React基础/02-JSX语法介绍.md

@@ -527,10 +527,3 @@ index.html:
 
 
 
-
-
-
-
-
-
-

13-React基础/06-React中与on相关的属性.md

@@ -0,0 +1,105 @@
+
+
+## 单项数据绑定
+
+
+在 Vue 中，可以通过 v-model 指令来实现双向数据绑定。但是，在 React 中并没有指令的概念，而且 **React 默认不支持 双向数据绑定**。
+
+React 只支持，把数据从 state 上传输到 页面，但是，无法自动实现数据从 页面 传输到 state 中 进行保存。
+
+React中，只支持单项数据绑定，不支持双向数据绑定。不信的话，我们来看下面这个例子：
+
+
+```java
+import React from "react";
+
+export default class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      msg: "这是 MyComponent 组件 默认的msg"
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <h3>呵呵哒</h3>
+        <input type="text" value={this.state.msg} />
+      </div>
+    );
+  }
+
+}
+
+
+```
+
+上方代码中，我们尝试在 input文本框中读取 state.msg 的值，运行结果中，却弹出了警告：
+
+20190213_2000.png
+
+```
+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中的数据是只读的）
+
+```javascript
+	<input type="text" value={this.state.msg} readOnly />
+```
+
+绑定 onChange 的举例如下：（通过onChange方法，实现双向数据绑定）
+
+```javascript
+import React from "react";
+
+export default class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      msg: "这是组件 默认的msg"
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>呵呵哒</h1>
+        <input
+          type="text" value={this.state.msg} onChange={this.txtChanged} ref="txt" />
+        <h3>{"实时显示msg中的内容：" + this.state.msg}</h3>
+      </div>
+    );
+  }
+
+  // 为 文本框 绑定 txtChanged 事件
+  txtChanged = (e) => {
+    // 获取 <input> 文本框中 文本的3种方式：
+    //  方式一：使用 document.getElementById
+
+    //  方式二：使用 ref
+    // console.log(this.refs.txt.value);
+
+    //  方式三：使用 事件对象的 参数 e 来拿
+    // 此时，e.target 就表示触发 这个事件的 事件源对象，得到的是一个原生的JS DOM 对象。在这个案例里，e.target就是指文本框
+    // console.log(e.target.value);
+    this.setState({
+      msg: e.target.value
+    });
+  };
+}
+
+```
+
+