Question

我正在尝试根据documentation使用<Autocomplete /> Material-UI组件。

他们的示例显示了如何通过使用getOptionDisabled prop函数来禁用自动完成功能，如下所示：

getOptionDisabled={option => option === timeSlots[0] || option === timeSlots[2]}

假设我有一个数组，该数组是我动态生成的要禁用的时间槽timeSlotsArr，如何使用此道具来排除timeSlotsArr中存在的所有选项数组？

我当前无法使用的代码如下：

<Autocomplete
  options={timeSlots}
  getOptionDisabled={option => option === timeSlotsArr.indexOf(option}
  style={{ width: 300 }}
  renderInput={params => (
    <TextField
      {...params}
      label="Disabled options"
      variant="outlined"
      fullWidth
      inputProps={{
        ...params.inputProps,
        autoComplete: 'disabled', // disable autocomplete and autofill
      }}
    />
  )}
/>

Answer 1

如果您要禁用下拉菜单中的所有选项，这还不够吗？

getOptionDisabled={option => true}

据我了解，您只传递了一个将返回布尔值的函数，这样就可以了，对吧？

此外，您的代码无法正常工作，因为它会将下拉列表中的选项之一与indexOf返回的内容进行比较，如果未找到则为-1，如果找到则为索引。那永远不会是真的。您可以将其更改为：

getOptionDisabled={option => !!timeSlotsArr.find(option)}

如果使用indexOf，则该选项也会使索引0也返回false，而您将不希望这样做。

Answer 2

这对我有用

getOptionDisabled={(option) => !!timeSlotsArr.find(element => element === option)}

数组中存在Material-UI自动完成禁用选项

2 个答案: