Question

我正在将Material-UI v4 AutoComplete组件与renderOption道具一起使用，以渲染checkbox项目选项，但是问题是当onChange事件触发时，它会更新hook在父组件中并向子项进行渲染，因此丢失了该组件的状态和所选项目的状态，这导致UI和逻辑不一致，如何在渲染时防止这种情况！

export default function CheckboxesTags() {
  return (
    <Autocomplete
      multiple
      id="checkboxes-tags-demo"
      options={top100Films}
      disableCloseOnSelect
      getOptionLabel={option => option.title}
      onChange={(e, values)=> {
          setMoveisFilter(values); // it calls the setter of the hook at the parent component

      }}
      renderOption={(option, { selected }) => (
        <React.Fragment>
          <Checkbox
            icon={icon}
            checkedIcon={checkedIcon}
            style={{ marginRight: 8 }}
            checked={selected}
          />
          {option.title}
        </React.Fragment>
      )}
      style={{ width: 500 }}
      renderInput={params => (
        <TextField
          {...params}
          label="Checkboxes"
          placeholder="Favorites"
          fullWidth
        />
      )}
    />

Answer 1

https://material-ui.com/api/autocomplete/ getOptionSelected道具就是您要寻找的东西例如getOptionSelected =（option，values）=> option._id === values._id

重新渲染组件时如何保持Material-UI自动完成的状态？

1 个答案: