在react-select包中选择项目后删除边框颜色

Question

从此软件包https://www.npmjs.com/package/react-select的下拉列表中选择项目后如何删除边框颜色

在gif图像中，一旦选中该项目，红色仍会突出显示控件，单击外部会使红色消失。但是如何使它在被选中时立即消失

Sample Link

Answer 1

react-select公开了blur方法，可用于以编程方式管理react-select的状态。 Doc Reference

export default class Example extends React.Component {
  rSelecRef = null;

  render() {
    return (
      <Select
        ref={item => (this.rSelecRef = item)}
        defaultValue={flavourOptions[2]}
        options={flavourOptions}
        onChange={() => this.rSelecRef.blur()}
        label="Single select"
        placeholder="Single select 1"
        isClearable
        theme={theme => ({
          ...theme,
          borderRadius: 0,
          color: "green",
          colors: {
            ...theme.colors,
            primary: "#b90000",
            primary25: "#c9cad0",
            primary50: "#c9cad0"
          }
        })}
      />
    );
  }
}

它适用于此特定方案。这是更新代码和框的链接。

https://codesandbox.io/s/n5vo76r02l