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

Question

<Autocomplete />我正在尝试按照他们的文档使用Material-UI 组件。

他们的示例展示了如何使用getOptionDisabledprop 函数禁用自动完成，如下所示：

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

假设我有一个正在动态生成 timeSlots 的数组，我想禁用它 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，而您不会希望这样。