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

Question

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

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

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"
          }
        })}
      />
    );
  }
}

它适用于这种特定情况。这是更新后的 codesandbox 的 link。

https://codesandbox.io/s/n5vo76r02l

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

Remove border color after item is selected in react-select package

reactjs

react-select