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事件。