React-select：如果使用 onChange，isClearable 不起作用

Question

单击

isClearable

中的 X 图标时，下拉列表会切换，而不是清除选项。如果我没有

onChange

道具，它就会清除。

Answer 1

使用

onChange={(value) => { setFilterParams({ ...filterParams, group: value })}

不是

onChange={(value) => {setFilterParams({ ...filterParams, group: value.id })}

Answer 2

您需要检查值是否不为空。

const [filterStatus, setFilterStatus] = useState("");
const paymentStatus = [
  { value: "pending", label: "Pending" },
  { value: "completed", label: "Completed" },
  { value: "refunded", label: "Refunded" },
  { value: "failed", label: "Failed" },
];

<Select
  className="form-control"
  classNamePrefix="select"
  defaultValue={filterStatus}
  isClearable
  isSearchable
  name="filterStatus"
  options={paymentStatus}
  onChange={(options) =>
    !options ? setFilterStatus("") : setFilterStatus(options.value)
  }
/>;

Answer 3

当您在选择时单击清除按钮时，“none”对象会在您的 onChange 函数中传递，这可能会导致错误。

在 Select 组件中更改 onChange 属性，如下所示：

onChange={ (e) => !e ? {} : onChangeHandler }

这样，只有当你确实有一些值时，你才调用 onChangeHandler ，否则你让反应选择组件自行清除。