实战！增删改查的不平凡

学习了 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;