React TS项目实现所有文件选分类前禁用保存按钮的方案咨询

问题原因 #

你现有代码的问题主要有两点：

• 直接修改了state中的well对象，违反React状态不可变更新原则，可能导致状态更新不触发视图重渲染
• submitDisabled的校验逻辑错误，仅判断了files数组是否存在，没有校验每个文件的分类是否完成选择

实现方案 #

可以使用数组的every方法完成全量校验，该方法只有当数组所有元素都满足判定条件时才返回true，刚好匹配「所有文件都完成分类才启用保存按钮」的需求。

修正后的代码 #

1. 输入变更处理逻辑修正 #

private handleInputChange = (index: number) => (event: any) => {
  // 拷贝对象避免直接修改原state，遵守不可变更新规则
  const newWell = { ...this.state.well };
  newWell.files = [...newWell.files];
  newWell.files[index] = {
    ...newWell.files[index],
    fileCategory: event.target.value
  };

  // 校验所有文件都已选择分类（空值代表未选择）
  const allCategorized = newWell.files.every(file => file.fileCategory.trim() !== '');
  
  this.setState({
    isDirty: true,
    submitDisabled: !allCategorized,
    well: newWell
  });
}

2. 补充初始化校验逻辑 #

组件挂载、首次拿到文件列表数据时，需要先做一次全量校验，避免初始状态下所有文件已完成分类，但保存按钮仍处于禁用状态：

// 示例：在获取well数据的回调中添加
componentDidMount() {
  // 调用接口拿到well数据后执行一次校验
  const fetchWellData = async () => {
    const well = await api.getWell(this.state.wellId);
    const allCategorized = well.files.every(file => file.fileCategory.trim() !== '');
    this.setState({
      well,
      submitDisabled: !allCategorized
    })
  }
  fetchWellData();
}

自定义规则调整 #

如果你的业务不允许将Not Categorized作为有效分类，只需要修改校验条件即可：

const allCategorized = newWell.files.every(file => {
  return file.fileCategory.trim() !== '' && file.fileCategory !== 'Not Categorized'
})

内容的提问来源于stack exchange，提问作者Matthew Lemke