一.配置环境
npx create-react-app todolist
npm add node-sass
二、组件—添加事件(包含一个input框和一个提交button)
placeholder 属性提供可描述输入字段预期值的提示信息(hint)。该提示会在输入字段为空时显示,并会在字段获得焦点时消失。
<input type="search" name="user_search" placeholder="Search W3School" />
控制组件的显示/隐藏
return (
<>
{isShow &&
(
<div className="input-wrapper">
</div>
)
}
</>
)
从父组件拿到子组件input传来的值
1.父组件定义回调函数,返回值为value
2.子组件将函数以props引入
3.子组件使用useRef钩子获取input值
- const inputRef = useRef();//定义ref,别忘了加const
- 在标签内添加ref={inputRef}
- 使用inputRef.current.value即可获得输入值
三、使用localStorage存储todolist
- class组件中可以使用生命周期函数didMount
- function组件中将其理解为副作用,使用useEffect处理
- 注意:副作用的执行顺序一定要考虑好
四、模态框组件与插槽
该阶段需要完成三个按钮点击后弹出model的功能
1、组件逻辑复用
目标:定义一个组件,可以通过一下方式调用:
<Model
isShowModel = {}
modelTiltle = {}
>
<h1></h1>
</Model>
传入不同的modelTitle表示不同的对话框
五、编辑框编写
textarea + useRef
如何使用新的item替换旧的item?===>使用.map()方法
//编辑按钮-提交按钮
const submitEditedData = (newData, id) => {
// console.log(newData, id)
setTodolist(todoList.map(item => {
if (item.id === id) item = newData
return item
}))
}
附:犯过的错
- state只能用setState来更改
- 在点击提交按钮时,todolist列表增加的内容是上一次输入的内容==>异步更新
setTodolist(todoList => […todoList, data])
console.log(todoList)//慢一拍
setTodolist(todoList => {
console.log([...todoList, data])
return [...todoList, data]
})
- 用.map()生成列表时,千万别忘了return
- 父组件定义的事件处理函数以属性的方式传递给子组件时,必须用useCallback
附:注意点
alt+鼠标左键 选中多行 esc退出
善用.map()、.filter()等遍历函数来setState
父组件获取子组件数据的逻辑:
父组件定义函数const A = (id)=>{}/这里的id需从子组件获取
父组件将A以props的形式传递给子组件
子组件中设置回调,直接传入数据即可 onClick={()=>{A(id)}}