react+antd中做一个外部按钮新增 表格内部本地新增一条数据并且支持编辑删除（无难度上手）

需求背景

做一个可以外部控制新增刷新表格 表格内部可以编辑删除 类似下方需求图

实现过程

因为我实现时有两个这样的表格 所以我的事件里面会有传参用于判断 可忽略传参判断部分 代码中有formatMessage部分为国际化可忽略

 <div style={{ marginBottom: '10px', marginTop: '10px', display: 'flex' }}>
          <Button type={'primary'} onClick={() => handleAddWhiteList(1)}>
            {formatMessage({ id: 'button.Add' })}
          </Button>

          <Button
            type={'primary'}
            style={{ marginLeft: '10px' }}
            onClick={() => onRefreshWhiteList(1)}
            icon={<SyncOutlined />}
          />
        </div>
        <Table
          size="small"
          columns={whiteColumns}
          dataSource={whiteDataSource}
          pagination={false}
          bordered={true}
          rowKey={'id'}
          scroll={{
            y: whiteDataSource?.length > 3 ? 55 * 3 : undefined, // 动态计算高度
          }}
        />


//js部分
  const [whiteDataSource, setWhiteDataSource] = useState([]);
  //白名单列表
  const whiteColumns = [
    {
      title: 'HOST',
      dataIndex: 'url',
      render: (text, record) => {
        return (
          <Input
            value={record.url}
            disabled={record.disabled}
            onBlur={(e) => handleUrlBlur(e, record.id, 1)}
            onChange={(e) => handleUrlWhitleChange(e, record.id, 1)}
            placeholder={formatMessage({ id: 'label.rollCall.PleaseEnter' })}
          />
        );
      },
    },
    {
      title: formatMessage({ id: 'label.Operation' }),
      dataIndex: 'operation',
      width: 120,
      render: (text, record) => {
        return (
          <Space size={'middle'}>
            <TableButton
              onClick={() => handleEdit(1, record)}
              disabled={!record.disabled}
              icon={
                <IconBtn
                  itemInfo={{ itemId: 'edit', title: formatMessage({ id: 'button.Edit' }) }}
                />
              }
            />

            <TableButton
              confirm
              confirmMsg={formatMessage({ id: 'confirm.Delete' })}
              onConfirm={() => handleDel(1, record)}
              icon={
                <IconBtn
                  itemInfo={{ itemId: 'delete', title: formatMessage({ id: 'button.Delete' }) }}
                />
              }
            />
          </Space>
        );
      },
    },
  ];
  const handleAddWhiteList = (num) => {
    if (num == 1) {
      setWhiteDataSource([
        ...whiteDataSource,
        { url: '', id: Date.now(), disabled: false, error: null },
      ]);
    } else {
      setBlackDataSource([
        ...blackDataSource,
        { url: '', id: Date.now(), disabled: false, error: null },
      ]);
    }
  };
  const onRefreshWhiteList = (num) => {
    if (num == 1) {
      setWhiteDataSource(whiteDataSource.filter((item) => item.url !== ''));
    } else {
      setBlackDataSource(blackDataSource.filter((item) => item.url !== ''));
    }
  };
  //名单失焦事件
  const handleUrlBlur = (e, id, num) => {
    if (num == 1) {
      const newData = whiteDataSource.map((item) => {
        if (item.id === id) {
          return { ...item, disabled: true };
        }
        return item;
      });
      setWhiteDataSource(newData);
    } else {
      const newData = blackDataSource.map((item) => {
        if (item.id === id) {
          return { ...item, disabled: true };
        }
        return item;
      });
      setBlackDataSource(newData);
    }
  };
  //名单输入事件
  const handleUrlWhitleChange = (e, id, num) => {
    if (num == 1) {
      const newData = whiteDataSource.map((item) => {
        if (item.id === id) {
          return { ...item, url: e.target.value };
        }
        return item;
      });
      setWhiteDataSource(newData);
    } else {
      const newData = blackDataSource.map((item) => {
        if (item.id === id) {
          return { ...item, url: e.target.value };
        }
        return item;
      });
      setBlackDataSource(newData);
    }
  };
//  编辑处理函数
  const handleEdit = (num, record) => {
    if (num == 1) {
      setWhiteDataSource((prev) =>
        prev.map((item) => (item.id === record.id ? { ...item, disabled: false } : item)),
      );
    } else {
      setBlackDataSource((prev) =>
        prev.map((item) => (item.id === record.id ? { ...item, disabled: false } : item)),
      );
    }
  };
  //删除处理
  const handleDel = (num, record) => {
    if (num == 1) {
      setWhiteDataSource((prev) => prev.filter((item) => item.id !== record.id));
    } else {
      setBlackDataSource((prev) => prev.filter((item) => item.id !== record.id));
    }
  };