如何在Material UI Autocomplete中禁用表格同一行已选的重复选项

你的场景完全可以使用Autocomplete组件提供的getOptionDisabled属性实现，具体实现逻辑如下：

1. 调整状态结构 #

你现存入this.state.data的每行数据需要新增两个字段：

• 行级的已选值集合selectedValues：用Set类型存储，用来记录当前行所有Autocomplete已经选中的选项唯一标识
• 列级的选中值映射colSelected：数组类型，按顺序记录该行每个Autocomplete当前选中的值，方便更新时移除旧值

2. 实现选中值更新逻辑 #

新增onChange回调函数，处理Autocomplete选中值变化时的状态更新：

handleOptionChange = (rowIndex, colIndex, newValue) => {
  this.setState(prevState => {
    const updatedData = [...prevState.data]
    const currentRow = updatedData[rowIndex]
    // 移除当前列之前选中的旧值，避免无效禁用
    const oldValue = currentRow.colSelected[colIndex]
    if (oldValue) {
      currentRow.selectedValues.delete(oldValue)
    }
    // 存入新选中的值
    if (newValue) {
      currentRow.selectedValues.add(newValue.value)
      currentRow.colSelected[colIndex] = newValue.value
    } else {
      // 处理清空选项的场景
      currentRow.colSelected[colIndex] = null
    }
    return { data: updatedData }
  })
}

3. 给Autocomplete绑定禁用逻辑 #

渲染每行的Autocomplete组件时，传入getOptionDisabled属性判断选项是否需要禁用：

{this.state.data.map((row, rowIndex) => (
  <TableRow key={rowIndex}>
    {/* 其他表格单元格 */}
    {row.autocompleteCols.map((_, colIndex) => (
      <TableCell key={colIndex}>
        <Autocomplete
          options={你的全局选项数组}
          getOptionDisabled={(option) => row.selectedValues.has(option.value)}
          onChange={(e, newValue) => this.handleOptionChange(rowIndex, colIndex, newValue)}
          value={row.colSelected[colIndex] ? 你的全局选项数组.find(opt => opt.value === row.colSelected[colIndex]) : null}
          renderInput={(params) => <TextField {...params} label={`选项${colIndex + 1}`} />}
          // 其他你需要的Autocomplete属性
        />
      </TableCell>
    ))}
  </TableRow>
))}

注意事项 #

• 要保证每个选项的唯一标识（示例中用value字段）稳定，不要使用对象引用作为判断是否选中的依据
• 初始化行数据时，记得给每一行初始化空的selectedValues: new Set()和colSelected: []
• 如果需求是仅后续列禁用，当前列和前面的列不禁用，可在getOptionDisabled的判断逻辑中加入列索引判断，仅当选中该值的列索引小于当前列索引时才禁用

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