在 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