文章目錄
- 單項數據綁定
- 通過onChange方法，實現雙向數據綁定
單項數據綁定
在 Vue 中，可以通過 v-model 指令來實現雙向數據綁定。但是，在 React 中并沒有指令的概念，而且 React 默認不支持 雙向數據綁定。
React 只支持，把數據從 state 上傳輸到 頁面，但是，無法自動實現數據從 頁面 傳輸到 state 中 進行保存。
React中，只支持單項數據綁定，不支持雙向數據綁定。不信的話，我們來看下面這個例子：
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中的數據是只讀的）
<input type="text" value={this.state.msg} readOnly />
綁定 onChange 的舉例如下：（通過onChange方法，實現雙向數據綁定）
(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><!-- 容器，通過 React 渲染得到的 虛擬DOM，會呈現到這個位置 --><div id="app"></div>
</body></html>（2）main.js:
// 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")
);（3）components/MyComponent.jsx
import React from "react";export default class MyComponent extends React.Component {constructor(props) {super(props);this.state = {msg: "這是組件 默認的msg"};}render() {return (<div><h1>呵呵噠</h1><inputtype="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});};
}工程文件：ReactDemo.zip
深度講解)
