todoList-hooks学习

一.配置环境

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
    }))
  }

附：犯过的错

1. state只能用setState来更改
2. 在点击提交按钮时，todolist列表增加的内容是上一次输入的内容==>异步更新
   setTodolist(todoList => […todoList, data])
   console.log(todoList)//慢一拍

  setTodolist(todoList => {
    console.log([...todoList, data])
    return [...todoList, data]
  })

3. 用.map()生成列表时，千万别忘了return
4. 父组件定义的事件处理函数以属性的方式传递给子组件时，必须用useCallback

附：注意点

alt+鼠标左键 选中多行 esc退出
善用.map()、.filter()等遍历函数来setState
父组件获取子组件数据的逻辑：
父组件定义函数const A = (id)=>{}/这里的id需从子组件获取
父组件将A以props的形式传递给子组件
子组件中设置回调，直接传入数据即可 onClick={()=>{A(id)}}