Review增删改查的代码+开始复现Antd pro的分析页(Day:26)

[XJQ124]

任务：复现Antd pro的分析页

进行中

---

1、Review代码

主要部分是增删改查的四个功能的实现

增：

//点击新增用户，调用showModal方法
     <Button type="primary" onClick={showModal}>+ 新增用户</Button>

//showModal方法中打开对话框
  const showModal = () => {
    setIsModalOpen(true);
  };

//然后在Ok的部分写入setData的方法，存入数据
//当然，编辑的代码也写到这里的
  const handleOk = () => {
    form.validateFields().then((values) => {
      console.log(values);
      if(isEditing){
        const newData = data.map((item)=>{
          if(item.key===values.key){
            return values
          }
          return item 
        })
        setData(newData);
        setPreData(newData);
      }else{
        setData([...data, { ...values, key: Date.now() }]);
        setPreData([...data, { ...values, key: Date.now() }]);
      }
      form.resetFields(); 
      setIsModalOpen(false);
    });
  };

删： 使用filter的方法返回符合是真值的数组，就是如果你选中的某行 key ！== item.key 那么就删掉，然后再存入newData

  const handleDelete = (key) => {
    const newData = data.filter((item) => item.key !== key);
    setData(newData);
  };

改：

 if(isEditing){
        const newData = data.map((item)=>{
          if(item.key===values.key){
            return values
          }
          return item 
        })
        setData(newData);
        setPreData(newData);
      }

查： 首先从preData数组中设置一个i，i 是 filter 函数的回调函数参数，代表数组 preData 中的每个元素。 我这里为了方便，只比对了列子中的前三例的数据，如果符合，则查找出来，如何不符合，就什么也不显示

  const onSearch = (value, _e) => {
    const newData = _.filter(preData,(i)=>{ 
      return i.name.includes(value) || i.email.includes(value) || i.phone.includes(value)
    })
    setData(newData)
  }

2、复现Antd pro的界面

这部分还在进行中，下周继续，，， 周末回去两个事情，第一个是补薄弱部分的基础 第二个是再把lodash的常用方法再学学