前言

今天用React做一个简单的待办事项列表，用户可以添加、编辑和删除待办事项，让我们一起看看吧~

组件分离

首先把它分成一个Header和一个List组件，分别用来添加和展示代办事项，并且实现添加、编辑和删除等功能

Header组件

下面是Header组件的代码：

import { Input, Button } from "antd";
import "./index.css";
import { ClockCircleOutlined } from "@ant-design/icons";
import { useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import List from "../List";
const Header = () => {
  const [value, setValue] = useState("");
  const [editId, setEditId] = useState();
  const dispatch = useDispatch();

  const todos = useSelector((state) => state.todos);

  const addItem = (e) => {
    //enter提交事件 value和输入框双向绑定 value为输入框的值
    if (editId) {
      dispatch({ type: "edit", id: editId, todoName: value });
      setEditId();
      setValue();
      return;
    }
    if (value) {
      dispatch({
        type: "add",
        value: {
          id: new Date().getTime(),
          todoName: value,
          isCompleted: false,
        },
      });
      setValue();
    }
  };

  return (
    <div className="showitem">
      <div className="container">
        <Input
          placeholder="Add your list"
          value={value}
          onChange={(e) => {
            setValue(e.target.value);
            console.log(e.target);
          }}
          onPressEnter={(e) => addItem(e)}
          allowClear
          prefix={<ClockCircleOutlined />}
          maxLength={11}
        />
        <div className="lists">
          {todos &&
            todos.map((item, index) => {
              console.log(item);
              return (
                <List
                  key={index}
                  items={item}
                  setValue={setValue}
                  setEditId={setEditId}
                />
              );
            })}
        </div>
        {todos.length === 0 && (
          <div className="nolist">暂时没有日程，请添加~~</div>
        )}
        {todos.length !== 0 && (
          <div className="clearall-clearcomplete">
            <Button
              type="text"
              shape="round"
              size="small"
              onClick={() => {
                dispatch({ type: "clearcomplete" });
                setEditId();
              }}
            >
              clear complete
            </Button>
            <Button
              type="text"
              shape="round"
              size="small"
              onClick={() => {
                dispatch({ type: "clear" });
                setEditId();
              }}
            >
              clear all
            </Button>
          </div>
        )}
      </div>
    </div>
  );
};

export default Header;

这里通过点击添加后获取输入框的值，将其添加到todo列表中，并将其默认设置为未完成，添加成功后将其输入框的值清空，当没有列表时，会提示当前没有待办事项。当有待办事项时可以将已完成的事项清除，或者清除全部待办事项。

List组件

List组件的代码如下:

import {GithubOutlined} from "@ant-design/icons"
import { useState } from "react";
import { useDispatch } from "react-redux";
import "./index.css"
const List = (props) => {
  const dispatch = useDispatch();
  const { todoName, isCompleted, id } = props.items;
  const setValue=props.setValue
  const setEditId=props.setEditId
  const [ok, setOk] = useState(isCompleted);
  const onChange = (e) => {
    setOk(!ok);
    dispatch({type:'complete',id:id})
  };
  const edit=()=>{
    setValue(todoName) 
    setEditId(id)
    document.getElementsByClassName("ant-input")[0].focus() 
   }
  
  return (
    <div
    className={isCompleted?"inline":null}
      style={{
        width: "300px",
        overflow: "hidden",
        borderWidth:"0px 1px 1px 1px",
        borderStyle:"solid",
        borderColor:"rgb(176, 174, 174)",
        display: "flex",
        justifyContent: "space-between",
        alignItems: "center",
      }}
    >

      <Checkbox onChange={onChange} checked={isCompleted}  >
        {todoName}
      </Checkbox>
      <div className="b">
      <Button type="text" shape="round" size="small" onClick={()=>edit()}>
          Edit
        </Button>
        <Popconfirm
        icon={<GithubOutlined />}
        placement="right"
        title="确定要删除吗?"
        description={null}
        onConfirm={()=>dispatch({type:"remove",id:id})}
        okText="确定"
        cancelText="取消"
        color="rgb(176, 174, 174)"
      >
        <Button type="text" shape="round" size="small" >
          Delete
        </Button>
      </Popconfirm>
      </div>
     
    </div>
  );
};
export default List;

通过遍历将todo列表中全部内容展示出来，并带上删除和编辑按钮，点击删除后有一个删除提示，确认是否需要删除，以免误触。点击编辑后该待办事项会回显到输入框中，并且通过判断正在编辑来决定添加按钮的点击结果。

总结

这就是待办事项demo的全部内容啦，如果有误请指出~~~