使用 MUI 检查自动完成中的复选框

Question

[
  { label: 'First', checked: false }, 
  { label: 'Second', checked: true }
]

这里是一个非常简短的片段，展示了数据的样子。我正在使用 Material UI 的自动完成功能，以便可以在标签上进行搜索。这些标签有一个复选框。

问题是，当它是 renderOption 时，我无法在 <Checkbox /> 上使用 onChange 自动完成只是关闭，没有做任何操作

<Autocomplete
  disableCloseOnSelect={true}
  options={array}
  getOptionLabel={option => option.label.toString()}
  renderInput={params => (
    <TextField
      {...params}
      fullWidth
      label="Select label"
      variant="outlined"
      error={false}
    />
  )}
  renderOption={opt => (
    <div>
      <Checkbox
        checked={opt.checked}
        onChange={() => alert('not being fired...')}
      />
      <p>{opt.label}</p>
    </div>
  )}
/>

Answer 1

您不应该在 Checkbox 中使用 onChange，您应该使用 Autocomplete 的 onChange 属性，并通过 value 属性设置默认值
Checkbox 从 renderOption 的 props

接收它的 props

const [selectedOptions, setSelectedOptions] = useState([]);

useEffect(() => {
   setSelectedOptions(options.filter(op => op.checked));
}, []);

<Autocomplete
   options={options}
   value={selectedOptions}
   onChange={(event, newValue) => {
      setSelectedUsers(newValue);
   }
   renderOption={(props, option, { selected }) => (
       <div {...props}>
          <Checkbox checked={selected} />
          <p>{option.name}</p>
        </div>
   )}
   disableCloseOnSelect
/>

Answer 2

onChange 事件将在 renderOption 函数中提供的复选框中起作用，但它仅在您单击复选框而不是列表项上的其他任何地方时起作用。如果满足您的目的，您可以在父级 div 上使用 onClick。

使用 MUI 检查自动完成中的复选框

Checking checkbox inside Autocompletion with MUI

javascript

reactjs

material-ui