学习了 useState 与 useRef ，结合前面几章内容，我们可以实现一个非常经典的功能：任务列表。
当我点击新增时，编辑弹窗出现，输入框自动获得焦点
输入任务描述之后，点击创建，此时任务创建成功，编辑弹窗消失，新增按钮再次出现
结合 React 哲学 中的思想，我们可以很自然的想到该按钮中的数据有：
// 任务列表 const [jobs, setJobs] = useState<Array<Job>>([]) // 编辑窗口显示与否 const [show, setShow] = useState(false) // 每次输入时当前任务描述 const [desc, setDesc] = useState('')
单个任务的数据格式为
interface Job { desc: string, id: string, createTime: number, isSelected: boolean }
点击「新增按钮」，编辑弹窗出现，新增按钮消失，因此在 JSX 中，我们可以这样去表达他们的交互关系
{show ? ( <div className="dialog"> <input onChange={event => setDesc(event.target.value)} ref={inputRef} placeholder="请输入任务描述" onBlur={() => { setTimeout(() => { setShow(false) }, 0) }} /> <div className="create" onClick={add}>创建</div> </div> ) : <div className="add" onClick={() => setShow(true)}>新增</div>}
input 框在失去焦点后编辑弹窗消失
我们可以使用 useRef 获得 input 组件的引用，以实现弹窗出现之后 input 能自动获取焦点的效果
const inputRef = useRef<HTMLInputElement>(null)
但是需要注意的是，input 元素是在 show 变成 true ，并且组件真实 DOM 再次渲染完成之后才能获取引用，因此这里运用了一个之后会学习的知识来解决这个问题
useEffect(() => { // show 变成 true，并且组件渲染完成之后执行 if (show) { inputRef.current?.focus() } }, [show])
当编辑弹窗出现，我们在弹窗中输入内容，需要将输入内容保存在 desc 字段中。
基于只操作数据的思想，点击新增，其实只是往任务列表数据 jobs 中新增一个值
function add() { jobs.push({ id: randomId(), desc, isSelected: false, createTime: Date.now() }) setJobs([...jobs]) setDesc('') }
这里需要注意为了让 React 感知到你的数组发生了变化，需要重新创建一个新的引用数组。否则 React 无法识别。
jobs 表示任务列表，可以根据该数据遍历出整个列表
{jobs.map((job, i) => ( <div className="job-wrapper" key={job.id}> <div className="selected" onClick={() => troggleSelected(i)}> {job.isSelected && <div className="circle"></div>} </div> <div className="desc">{job.desc}</div> <div className="remove" onClick={() => remove(i)}>删除</div> </div> ))}
删除与编辑都只需要修改对应的数组数据即可
function remove(i: number) { jobs.splice(i, 1) setJobs([...jobs]) } function troggleSelected(i: number) { jobs[i].isSelected = !jobs[i].isSelected setJobs([...jobs]) }
就这样，我们轻松实现了一个列表的增删改查，完整代码如下
import { useEffect, useRef, useState } from 'react'; import { randomId } from './utils/index' import logo from './logo.svg'; import './App.css'; interface Job { desc: string, id: string, createTime: number, isSelected: boolean } function App() { const [jobs, setJobs] = useState<Array<Job>>([]) const [show, setShow] = useState(false) const [desc, setDesc] = useState('') const inputRef = useRef<HTMLInputElement>(null) useEffect(() => { if (show) { inputRef.current?.focus() } }, [show]) function add() { jobs.push({ id: randomId(), desc, isSelected: false, createTime: Date.now() }) setJobs([...jobs]) setDesc('') } function remove(i: number) { jobs.splice(i, 1) setJobs([...jobs]) } function troggleSelected(i: number) { jobs[i].isSelected = !jobs[i].isSelected setJobs([...jobs]) } return ( <div className="App"> <header className="App-header"> <img src={logo} className="App-logo" alt="logo" /> <h1>React 知命境</h1> </header> <div className="container"> <div className="task-header"> <div className="title">进行中的任务</div> <div className="right">...</div> </div> {jobs.map((job, i) => ( <div className="job-wrapper" key={job.id}> <div className="selected" onClick={() => troggleSelected(i)}> {job.isSelected && <div className="circle"></div>} </div> <div className="desc">{job.desc}</div> <div className="remove" onClick={() => remove(i)}>删除</div> </div> ))} {show ? ( <div className="dialog"> <input onChange={event => setDesc(event.target.value)} ref={inputRef} placeholder="请输入任务描述" onBlur={() => { setTimeout(() => { setShow(false) }, 0) }} /> <div className="create" onClick={add}>创建</div> </div> ) : <div className="add" onClick={() => setShow(true)}>新增</div>} </div> </div> ); } export default App;
很显然，代码功能虽然实现了，但是代码上并不简洁，学习了 React 哲学的同学可以思考一下，我们应该从哪些角度去思考如何进一步简化代码呢？下一章继续分享
