reactjs - 在 react 选择上使用 isClearable 时事件为空

Question

我正在将react-select Select组件作为Material-UI InputBase组件中的InputComponent传递。我已成功地从选项中填充值，但是，我无法使用 isClearable。

当 isClearable 被触发时，null 会被传递到 handleChange(event) 函数，我希望有一种方法可以强制对象通过以防止 null 产生错误。

InputBase 中的handleChange 函数有var element = event.target || inputRef.current。由于事件为 null，因此它甚至无法访问包含所需对象的 inputRef。

如果能将其作为不受控制的组件工作，那就太好了。

我创建了一个代码框来说明问题:https://codesandbox.io/s/morning-feather-l7xqf

Answer 1

您可以提供自定义的 onChange() 来捕获 null 并传递您自己的值:

// Deconstruct from otherProps
const SelectWrapper = ({ inputRef, onChange, ...otherProps }) => {
  
  function handleChange(event) {
    // Overwrite the event with your own object if it doesn't exist
    if (!event) {
      event = {
        target: inputRef,
        value: '',
      };
    }
    onChange(event);
  }
  
  return (
    // Pass in the custom handleChange
    <Select styles={customStyle} isClearable ref={inputRef} onChange={handleChange} {...otherProps} />
  );
};