前一小节,我们已经完成了数据的动态展示,现在我们要完成数据的动态添加。如何添加呢?肯定是要通过Header
组件来添加,但是Header
组件如何将收集的任务数据,交给App
组件并更新状态数据呢?
在Header组件中收集任务项数据
import React, { Component } from 'react' import "./index.css" export default class Header extends Component { // 收集输入的任务项数据 getTodoData = (event) => { console.log(event.target.value) } render() { return ( <div className="todo-header"> <input onKeyUp={this.getTodoData} type="text" placeholder="请输入你的任务名称,按回车键确认"/> </div> ) } }
我们在组件的输入框元素上面添加了onKeyUp
键盘事件,因为事件发生在元素本身,所以我们不要ref
,而是通过事件源拿到输入的数据。
改造1:我们想要在按下enter(回车键)
时,才打印我们收集的数据
// 收集输入的任务项数据 getTodoData = (event) => { const {keyCode,target} = event if (keyCode === 13) { console.log(target.value,keyCode) } }
我们可以在事件身上拿到keyCode 和 target
来确认是否按下回车键,以及收集到的值。但是这里有一个问题:那就是输入框没有值时,按下回车键,也可以打印值,这不是我们想要的。
改造2:空值不处理后续逻辑
// 收集输入的任务项数据 getTodoData = (event) => { const {keyCode,target} = event if (target.value.trim() === '') return; if (keyCode === 13) { console.log(target.value,keyCode) } }
当我们判断输入框的值是空值,且按下了回车键,我们直接return
不做后续处理。
改造3:将输入的任务名称组装为一个Todo对象
// 收集输入的任务项数据 getTodoData = (event) => { const {keyCode,target} = event if (target.value.trim() === '') return; if (keyCode === 13) { const newTodoObj = {id:'004',name:target.value,done:false} console.log(newTodoObj) } }
这里我们将拿到的输入值,拼装为一个对象,为后续做准备,但是这里有一个问题,那就是id
值是004
,这是一个固定值,当然我们只添加一条数据肯定没问题,但是我们肯定不止添加一条数据,因为那就没有意义了。
改造4:将ID值变成唯一标识且不重复
这里我们需要安装nanoid
使用这个库我们可以生成不重复的uuid
步骤1:安装依赖
npm i nanoid
步骤2:引入依赖并改造代码
import { nanoid } from 'nanoid' // 收集输入的任务项数据 getTodoData = (event) => { const {keyCode,target} = event if (target.value.trim() === '') return; if (keyCode === 13) { const newTodoObj = {id:nanoid(),name:target.value,done:false} console.log(newTodoObj) } }
步骤3:查看效果
{ id: "v1NnCpyHxlh4qrKwlv2W1", name: "45151", done: false }
我们可以看到这里的id
已经变成长度为21
的字符串了,每次方法nanoid()
都会生成一个不重复的且默认长度为21
的字符串。
将收集的数据交给App组件
我们如何将收集的数据交给App
组件呢?答案还是props
。但是这次传的props
是一个函数,不是普通的值。
- 步骤1:在
App
组件定义一个函数,并使用props
传入Header
组件。
import React, { Component } from 'react' import Header from "./components/Header" import List from "./components/List" import Footer from "./components/Footer" import "./index.css" export default class App extends Component { // 定义列表的初始状态数据 state = {todos: [ {id:'001',name:'吃饭',done: true}, {id:'002',name:'睡觉',done: true}, {id:'003',name:'写代码',done: false}, ]} // 获取Header组件收集的任务项数据 addTodo = (todoObj) => { console.log(todoObj) } render() { const { todos } = this.state return ( <div className="todo-container"> <div className="todo-wrap"> <Header addTodo={this.addTodo}/> <List todos={todos}/> <Footer/> </div> </div> ) } }
- 步骤2:Header组件通过
addTodo
函数将组装的对象作为参数进行传递
// 收集输入的任务项数据 getTodoData = (event) => { const {keyCode,target} = event if (target.value.trim() === '') return; if (keyCode === 13) { const newTodoObj = {id:nanoid(),name:target.value,done:false} this.props.addTodo(newTodoObj) target.value = '' // 清空输入框 } }
- 步骤3:更新App组件的状态数据
// 获取Header组件收集的任务项数据 addTodo = (todoObj) => { const { todos } = this.state const newTodo = [todoObj, ...todos] this.setState({todos:newTodo}) }
这里我们拿到旧的状态数据与Header
组件收集的数据组装在一起,在使用setState
更新状态,由于会重新渲染页面,所以List
组件也是拿到的最新的数据。
小总结
本小节主要学习了一下知识:
- 使用
keyCode
属性判断回车键 - 使用
nanoid
依赖库生成UUID
- 使用
props
传递函数,使得父组件拿到子组件的数据