前一小节，我们已经完成了数据的动态展示，现在我们要完成数据的动态添加。如何添加呢？肯定是要通过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传递函数，使得父组件拿到子组件的数据