本章内容
目录
- 一、响应式设计思想
- 二、React 中的事件绑定
继上一节我们简单实现一个 TodoList
来更加了解编写组件的一些细节。本节继续这个案例功能的完成。
一、响应式设计思想
1、在原生的 JS
中,如果要实现点击”提交“按钮就将输入框的内容添加至页面列表中,我们通常的步骤是:
- 首先给”提交“按钮绑定一个点击事件,然后获取到
input
输入框的value
值。 - 接着通过
document.getElementById
找到这个”列表“最外层的元素,然后把input
框里的内容”挂载“到这个外层DOM
元素中
2、然而,在 React
编码过程中,由于 React
是一个响应式的框架。它跟原生JS
操作 DOM
的方式思想完全不一样。React
强调的是”自动感知数据的变化,然后自动的生成DOM
“。因此在 React
代码编写过程中,我们只需要关注”数据层“即可
3、现在我们打开 TodoList.js
文件,使用 React
的编程思想来编写功能。React
编码只需要关注数据层,按照功能的要求,我们只需要两组”数据“:一组”数据“存储input
框里的值,一组”数据“用来存储列表中的”每一项“
import React, { Component, Fragment } from "react";class TodoList extends Component{constructor(props) {super(props) // ES6 的语法this.state = {inputValue: 'hello wolrd!', // input 输入框中的值list: [] // 列表里的数据}}render() {return (<Fragment><div>{/* 在 JSX 语法中,标签里如果有 JS表达式,需要使用 {} 括起来。注释也一样 */}{/* input 元素的 value 绑定在 state 的 inputValue 中,因此输入框中的内容由 inputValue 的内容决定*/}<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
的值,页面输入框的内容也随之变化。这也就是说,React
可以感知数据的变化,主动的把数据映射到页面中,而不需要像原生 JS
那么麻烦的去操作 DOM
5、当在页面输入框中不停的输入内容,我们会发现里面的内容完全不会变化。这是因为 input
框中的内容是由”组件“的 state
状态对应的 inputValue
值决定的。在代码里我们已经写死了,所以不管我们怎么操作input
框中的内容,页面都毫无变化。那怎么解决这问题呢?这就需要给 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 输入框中的值. 设置为空字符,以便后续自由输入list: [] }}render() {return (<Fragment><div>{/* 2、给 input 绑定一个 onChange 的监听事件,当输入框有内容变化时,执行 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 框对应的 DOM 节点,event.target.value 对应输入框中的 value 值。changeInputValue(e) {console.log(e.target.value)}
}export default TodoList
2、运行代码,再次操作页面的输入框,可以看到控制台输出对应的内容
3、但是有个问题就是,控制台是可以看到内容的变化,但是页面输入框仍然没啥变化。这个时候就要使用 React
为每个组件提供的 setState()
方法,用来改变组件的 state
状态里的数据值
import React, { Component, Fragment } from "react";class TodoList extends Component{constructor(props) {super(props) // ES6 的语法this.state = {inputValue: '', // 1、input 输入框中的值. 设置为空字符,以便后续自由输入list: [] }}render() {return (<Fragment><div>{/* 2、给 input 绑定一个 onChange 的监听事件,当输入框有内容变化时,执行 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 框对应的 DOM 节点,event.target.value 对应输入框中的 value 值。changeInputValue(e) {console.log(e.target.value)this.setState({inputValue: e.target.value})}
}export default TodoList
4、再次操作界面,发现输入框里的内容可以变化了
到此,本章的内容就结束了!