);
}
}
```
上方代码中,我们尝试在 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
```
**绑定 onChange 的举例如下**:(通过onChange方法,实现双向数据绑定)
(1)index.html:
```html
Document
```
(2)main.js:
```javascript
// JS打包入口文件
// 1. 导入包
import React from "react";
import ReactDOM from "react-dom";
// 导入组件
import MyComponent from "./components/MyComponent.jsx";
// 使用 render 函数渲染 虚拟DOM
ReactDOM.render(