本章內(nèi)容

目錄

• • • 一、響應式設計思想
    • 二、React 中的事件綁定

繼上一節(jié)我們簡單實現(xiàn)一個 TodoList來更加了解編寫組件的一些細節(jié)。本節(jié)繼續(xù)這個案例功能的完成。

一、響應式設計思想

1、在原生的 JS中，如果要實現(xiàn)點擊”提交“按鈕就將輸入框的內(nèi)容添加至頁面列表中，我們通常的步驟是：

• 首先給”提交“按鈕綁定一個點擊事件，然后獲取到 input輸入框的 value值。
• 接著通過 document.getElementById找到這個”列表“最外層的元素，然后把 input框里的內(nèi)容”掛載“到這個外層 DOM元素中

2、然而，在 React編碼過程中，由于 React是一個響應式的框架。它跟原生JS操作 DOM的方式思想完全不一樣。React強調(diào)的是”自動感知數(shù)據(jù)的變化，然后自動的生成DOM“。因此在 React代碼編寫過程中，我們只需要關注”數(shù)據(jù)層“即可

3、現(xiàn)在我們打開 TodoList.js文件，使用 React的編程思想來編寫功能。React編碼只需要關注數(shù)據(jù)層，按照功能的要求，我們只需要兩組”數(shù)據(jù)“：一組”數(shù)據(jù)“存儲input框里的值，一組”數(shù)據(jù)“用來存儲列表中的”每一項“

import React, { Component, Fragment } from "react";class TodoList extends Component{constructor(props) {super(props) // ES6 的語法this.state = {inputValue: 'hello wolrd!', // input 輸入框中的值list: [] // 列表里的數(shù)據(jù)}}render() {return (<Fragment><div>{/* 在 JSX 語法中，標簽里如果有 JS表達式，需要使用 {} 括起來。注釋也一樣 */}{/* input 元素的 value 綁定在 state 的 inputValue 中，因此輸入框中的內(nèi)容由 inputValue 的內(nèi)容決定*/}<input value={this.state.inputValue} /><button> 提交 </button></div><ul><li>React 入門-01</li><li>React 入門-02</li><li>React 入門-03</li></ul></Fragment>)}
}export default TodoList

4、不停的修改 inputValue的值，頁面輸入框的內(nèi)容也隨之變化。這也就是說，React可以感知數(shù)據(jù)的變化，主動的把數(shù)據(jù)映射到頁面中，而不需要像原生 JS那么麻煩的去操作 DOM

5、當在頁面輸入框中不停的輸入內(nèi)容，我們會發(fā)現(xiàn)里面的內(nèi)容完全不會變化。這是因為 input框中的內(nèi)容是由”組件“的 state狀態(tài)對應的 inputValue值決定的。在代碼里我們已經(jīng)寫死了，所以不管我們怎么操作input框中的內(nèi)容，頁面都毫無變化。那怎么解決這問題呢？這就需要給 input綁定事件了

二、React 中的事件綁定

1、修改 TodoList.js中的代碼，給 input元素綁定事件

import React, { Component, Fragment } from "react";class TodoList extends Component{constructor(props) {super(props) // ES6 的語法this.state = {inputValue: '', // 1、input 輸入框中的值. 設置為空字符，以便后續(xù)自由輸入list: [] }}render() {return (<Fragment><div>{/* 2、給 input 綁定一個 onChange 的監(jiān)聽事件，當輸入框有內(nèi)容變化時，執(zhí)行 changeInputValue 方法 */}{/* 3、React 綁定事件不同于原生 JS，使用”駝峰“形式 */}{/* 4、”JSX 語法“ 要求將 ”JS 表達式“ 寫在 {} 中 */}{/* 5、使用 bind(this), 將 this 的指向指為 TodoList  */}<input value={this.state.inputValue} onChange={this.changeInputValue.bind(this)} /><button> 提交 </button></div><ul><li>React 入門-01</li><li>React 入門-02</li><li>React 入門-03</li></ul></Fragment>)}// 6、定義一個 方法，傳入 event 事件，其 target 指向 input 框?qū)?DOM 節(jié)點，event.target.value 對應輸入框中的 value 值。changeInputValue(e) {console.log(e.target.value)}
}export default TodoList

2、運行代碼，再次操作頁面的輸入框，可以看到控制臺輸出對應的內(nèi)容

3、但是有個問題就是，控制臺是可以看到內(nèi)容的變化，但是頁面輸入框仍然沒啥變化。這個時候就要使用 React 為每個組件提供的 setState()方法，用來改變組件的 state狀態(tài)里的數(shù)據(jù)值

import React, { Component, Fragment } from "react";class TodoList extends Component{constructor(props) {super(props) // ES6 的語法this.state = {inputValue: '', // 1、input 輸入框中的值. 設置為空字符，以便后續(xù)自由輸入list: [] }}render() {return (<Fragment><div>{/* 2、給 input 綁定一個 onChange 的監(jiān)聽事件，當輸入框有內(nèi)容變化時，執(zhí)行 changeInputValue 方法 */}{/* 3、React 綁定事件不同于原生 JS，使用”駝峰“形式 */}{/* 4、”JSX 語法“ 要求將 ”JS 表達式“ 寫在 {} 中 */}{/* 5、使用 bind(this), 將 this 的指向指為 TodoList  */}<input value={this.state.inputValue} onChange={this.changeInputValue.bind(this)} /><button> 提交 </button></div><ul><li>React 入門-01</li><li>React 入門-02</li><li>React 入門-03</li></ul></Fragment>)}// 6、定義一個 方法，傳入 event 事件，其 target 指向 input 框?qū)?DOM 節(jié)點，event.target.value 對應輸入框中的 value 值。changeInputValue(e) {console.log(e.target.value)this.setState({inputValue: e.target.value})}
}export default TodoList

4、再次操作界面，發(fā)現(xiàn)輸入框里的內(nèi)容可以變化了

到此，本章的內(nèi)容就結(jié)束了！