почему флажок не установлен в реагировать?

Question

Я пытаюсь реализовать Auto complete, имея checkbox.

https://material-ui.com/components/autocomplete/#autocomplete

, но когда я реализовать тот же компонент в final-form Я не могу проверить мой вариант, почему?

вот мой код https://codesandbox.io/s/relaxed-breeze-hv58o

<Autocomplete
      {...rest}
      multiple={multiple}
      disableCloseOnSelect={true}
      options={
        multiple
          ? maxReached
            ? []
            : options.filter(option => !value.includes(option.value))
          : options
      }
      defaultValue={
        multiple
          ? options.filter(option => value.includes(option.value))
          : options.find(option => option.value === value)
      }
      onChange={
        multiple
          ? (_e, values) => {
              setMaxReached(value.length >= max - 1);
              onChange(values.map(option => option.value));
            }
          : (_e, option) => onChange(option.value)
      }
      getOptionLabel={option => option.label}
      noOptionsText={
        maxReached
          ? formatMessage({ id: "components.autocomplete.max" }, { max })
          : formatMessage({ id: "components.autocomplete.no" })
      }
      renderOption={(option, { selected }) => (
        <React.Fragment>
          <Checkbox
            icon={icon}
            checkedIcon={checkedIcon}
            style={{ marginRight: 8 }}
            checked={selected}
          />
          {option.label}
        </React.Fragment>
      )}
      renderInput={params => (
        <TextField
          {...params}
          {...restInput}
          label={label}
          placeholder={placeholder || ""}
          helperText={
            hasError ? formatMessage({ id: error }, { label }) : helperText
          }
          error={hasError}
          fullWidth
        />
      )}
    />
  );
};

Answer 1

У вас есть некоторые проблемы с вашим кодом ( фиксированная версия ):

1. Вы звоните onChange, что делает React-Final-Form повторный рендеринг, что приводит к Autocomplete компонент для повторного рендеринга и удаления выбранного состояния. Чтобы это исправить, вам нужно будет использовать опцию getOptionSelected.

getOptionSelected={(option, value) => {
    return option.value === value.value;
}}
options={ 
    options
}
onChange={(_e, values) => {
    onChange(values);
}

Вы фильтруете options на основе компонента Autocomplete, поэтому выбранная опция отфильтровывается. так из этого:

options={
  multiple
  ? maxReached
  ? []
  : options.filter(option => !value.includes(option.value))
  : options
}

К

options={
   options
}