为什么复选框没有选中反应？

Question

我正在尝试实现具有checkbox 的Auto complete。

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

您的代码存在一些问题 (fixed version)：

1. 您正在调用onChange，这使得React-Final-Form 重新渲染，这导致Autocomplete 组件重新渲染，并删除选择状态。要解决此问题，您必须使用 getOptionSelected 选项。

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

1. 您正在根据Autocomplete 组件过滤options，因此选定的选项会被过滤掉。 所以从这里开始：

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

到

options={
   options
}