React - MUI 自动完成单选删除事件

Question

我使用material UI autocomplete来创建单选dropdown 。 但问题是当我点击输入右侧的关闭按钮时，onChange 事件没有调用，我的 state 没有更新。 在多选模式下，此事件成功发生。 有人帮我在单选模式下使用删除事件。

这是我的单 select：

<Autocomplete<Option<T>>
      onChange={(e: any, newValue) => {
        if (newValue) {
          handleChangeValue(newValue.value);
        }
      }}
      sx={{ ...sx }}
      id={id}
      options={options}
      isOptionEqualToValue={(newValue, option) =>
        newValue.value === option.value
      }
      defaultValue={
        defaultValue && {
          value: defaultValue,
          label: options.find((option) => option.value === defaultValue)?.label,
        }
      }
      value={
        value && {
          value: value,
          label: options.find((option) => option.value === value)?.label,
        }
      }
      getOptionLabel={(option) => option.label || `${option.value}`}
      renderOption={(props, option, { selected }) => (
        <li value={option.value} {...props}>
          <Checkbox
            style={{ marginRight: 8 }}
            checked={selected}
            id={`${option.value}`}
          />
          {option.label || `${option.value}`}
        </li>
      )}
      renderInput={(params) => (
        <TextField
          value={value}
          {...params}
          placeholder={global.translate(placeholder)}
        />
      )}
    />

这是我的多选自动完成：

<Autocomplete
      onChange={(e: any, value) => {
        onChange(value);
      }}
      value={value}
      sx={{ ...sx }}
      multiple
      id={id}
      options={options}
      disableCloseOnSelect
      defaultValue={[...defaultValues]}
      getOptionLabel={(option) => option.label}
      isOptionEqualToValue={(newValue, option) =>
        newValue.value === option.value
      }
      renderOption={(props, option, { selected }) => (
        <li value={option.value} {...props}>
          <Checkbox
            icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
            checkedIcon={<CheckBoxIcon fontSize="small" />}
            style={{ marginRight: 8 }}
            checked={selected}
            id={option.value}
          />
          {option.label}
        </li>
      )}
      renderInput={(params) => (
        <TextField {...params} placeholder={placeholder} />
      )}
    />

Answer 1

在单选模式Autocomplete组件中，如果仅存在newValue ，则发送handleChangeValue 。

因此，在您的单选模式下，您需要更改以下代码：

<Autocomplete<Option<T>>
  onChange={(e: any, newValue) => {
    if (newValue) {
      handleChangeValue(newValue.value);
    }
  }}

到这段代码：

<Autocomplete<Option<T>>
  onChange={(e: any, newValue) => {
    const valueToBeSent = newValue ? newValue.value : undefined;
    handleChangeValue(valueToBeSent);
  }}

为了在每次值更改时发送onChange事件。