react18+antdPro可编辑表格的使用和数据联动

在项目中经常会遇到这样的需求 表格数据是需要编辑的 而且有联动的需求，比如 结论是单选形式 选了存疑的 才能选存疑类型 然后会在上面tag显示对应的人数 存疑 > 0 人就显红， 符合要求小于总数就显红 而且选择为符合要求后 还要清空存疑类型

在vue中这很好实现 得益于v-model的双向绑定， 才开始做react项目不久， 确实让我犯了难 只知道用render写自定义组件，但是里面内容不知道咋么写 form中的name咋办能获取到数组中每行的内容，而且数据是单向的。 而且antdPro官方的文档有些晦涩难懂，所以做出来后总结一下，希望也能给大家有所帮助。

首先配置可编辑列表的key

  const defaultData: any[] = [
    // 初始化数据源
    // ...
    { type: '建造师', address: '156', id: '123456', jl: 0, cylx: [] },
    { type: '建师', address: '44', id: 33, jl: 0, cylx: [] },
    { type: '阮经天', address: '44', id: 313, jl: 0, cylx: [] },
    { type: '刘德华', address: '444', id: 343, jl: 0, cylx: [] },
  ];
	// 这表示把数据源中所有的id作为可编辑表格key  也就是全部都可编辑，同时要在可编辑表格中type修改为多选
  const [editableKeys, setEditableRowKeys] = useState<React.Key[]>(() =>
    defaultData.map((item) => item.id),
  );
  //表格的响应式数据
  const [dataSource, setDataSource] = useState(() => defaultData);
  // tag的响应式数据
  const [person, setPerson] = useState<Person>({
    total: defaultData.length,
    meetsRequirement: 0,
    doubt: 0,
    socialSecurityDoubt: 0,
    certificate