React中如何根据categories字段选择预设rata字段默认值

要实现选择文件类别时自动填充rata字段的默认值，同时允许用户后续修改，按以下步骤修改代码：

1. 定义类别与默认Rata值的映射 #

在组件内部（return语句之前）创建一个对象，存储每个类别对应的默认rata值，根据业务需求填充具体内容：

const categoryRataDefaults = {
  "auto": "12", // 示例：选择"auto"类别时，rata默认值为12
  "vita": "6",  // 示例：选择"vita"类别时，rata默认值为6
  // 补充其他类别对应的默认值
};

2. 修改Category选择器的onChange事件 #

找到Tipo polizza对应的Select组件，修改其onChange回调，在设置类别的同时为rata字段设置默认值：

<Select
  // 保留原有props...
  onChange={(e) => {
    const selectedCategory = e.target.value;
    // 先更新category字段
    handleInput('category', selectedCategory, index);
    
    // 获取当前文件的rata值，若未设置则赋予默认值
    const currentRata = selectedFiles[index].rata;
    const defaultRata = categoryRataDefaults[selectedCategory] || '';
    
    // 仅当rata未被用户手动设置过时，才填充默认值
    if (!currentRata) {
      handleInput('rata', '', index, defaultRata);
    }
  }}
>

如果不想依赖handleInput函数，也可以直接更新状态：

onChange={(e) => {
  const selectedCategory = e.target.value;
  setSelectedFiles(prevFiles => {
    const updatedFiles = [...prevFiles];
    const targetFile = {...updatedFiles[index]};
    
    // 更新类别
    targetFile.category = selectedCategory;
    
    // 填充rata默认值（仅当rata为空时）
    if (!targetFile.rata) {
      targetFile.rata = categoryRataDefaults[selectedCategory] || '';
    }
    
    updatedFiles[index] = targetFile;
    return updatedFiles;
  });
}}

3. 确认用户修改权限 #

当前rata选择器的onChange逻辑已经支持用户修改值，无需额外调整：

<Select
  // 保留原有props...
  onChange={(e) => handleInput('rata', '', index, e.target.value)}
>

用户选择新的rata值后，会覆盖之前的默认值，完全符合需求。

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