2019-02-13 20:20:28 +08:00
## 单项数据绑定
在 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的举例如下： （ ）
```javascript
< input type = "text" value = {this.state.msg} readOnly / >
```
2019-02-14 10:47:45 +08:00
**绑定 onChange 的举例如下**： （ ， ）
(1)index.html:
```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 >
<!-- 容器，通过 React 渲染得到的 虚拟DOM， -->
< div id = "app" > < / div >
< / body >
< / html >
```
（ ）
```javascript
// JS打包入口文件
// 1. 导入包
import React from "react";
import ReactDOM from "react-dom";
// 导入组件
import MyComponent from "./components/MyComponent.jsx";
// 使用 render 函数渲染 虚拟DOM
ReactDOM.render(
< div >
< MyComponent > < / MyComponent >
< / div > ,
document.getElementById("app")
);
```
（ ）
2019-02-13 20:20:28 +08:00
```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中的内容： < / h3 >
< / div >
);
}
// 为 文本框 绑定 txtChanged 事件
txtChanged = (e) => {
// 获取 < input > 文本框中 文本的3种方式：
// 方式一：使用 document.getElementById
// 方式二：使用 ref
// console.log(this.refs.txt.value);
// 方式三：使用 事件对象的 参数 e 来拿
// 此时， ， ，
// console.log(e.target.value);
this.setState({
msg: e.target.value
});
};
}
```
2019-02-14 10:47:45 +08:00
工程文件：
- [2019-02-13-ReactDemo.zip]()
