Javascript 如何覆盖ClearIndicator的onClick to blur控件以在react select中清除？

我想在单击ClearIndicator按钮后立即从react select中的控制字段中删除焦点

我尝试使用自定义ClearIndicator组件并为其定义onClick处理程序，但这似乎不会影响clear按钮的onClick行为

是否有一种方法可以覆盖或修改ClearIndicator按钮的onClick行为，以便在单击Clear按钮时调用blur方法

下面给出了我尝试的代码

// react-select main component

<Select
  components={{ ClearIndicator }}
  isSearchable
  isClearable
 />

代码沙盒链接：

---

我已编辑了您的代码，并将对select本身执行的操作直接移动到select所在的默认组件中：

export default () => {
  
  const selectRef = useRef(null);
  const blurOut = () => {
    selectRef.current.blur();
  }
  return (
    <Select
      ref={selectRef}
      onChange={blurOut}
      defaultValue={colourOptions[1]}
      options={colourOptions}
      components={ClearIndicator }
      isClearable
    />
  );
};

提示： 决不要使用state存储对元素的引用。使用useRef-

非常感谢useRef提示！我修改了原始代码以使用它：然而，这仍然不能解决原始问题。当从下拉列表中选择某个选项时，您为blur指定的代码将显示在控制字段中。但是当你点击“清除”时，你仍然可以在控制字段中输入，而不点击任何东西，这意味着它仍然是聚焦的，并且在点击“清除”时不会变得模糊。

export default () => {
  
  const selectRef = useRef(null);
  const blurOut = () => {
    selectRef.current.blur();
  }
  return (
    <Select
      ref={selectRef}
      onChange={blurOut}
      defaultValue={colourOptions[1]}
      options={colourOptions}
      components={ClearIndicator }
      isClearable
    />
  );
};

const ClearIndicator = (props) => {
  const {
    children = <CustomClearText />,
    getStyles,
    innerProps: { ref, ...restInnerProps }
  } = props;


  return (
    <div
      {...restInnerProps}
      ref={ref}
      style={getStyles("clearIndicator", props)}
      
    >
      <div style={{ padding: "0px 5px" }}>{children}</div>
    </div>
  );
};