React-select：如何关闭面板？

Question

我有一个带有自定义选项组件的 react-select 实例。当我 select 一个选项时，面板不会关闭。我必须在 select 之外单击才能实现。我可以使用任何类型的全局道具吗？例如在 Reakit 中有 popover.hide()。当控制台记录道具时，我在 React-select 中没有看到类似的东西。

这是我的代码：

const CustomOption = ({children, onSelect, ...props}) => {
  return (
    <div>
      {children}
          <Chip
            label="SELECT ME"
            onClick={() => onSelect(props.data)}
          />
    </div>
  );
};

const MySelect = ({onSelect) => {
  const customOption = {
    Option: ({ children, ...props }) => <CustomOption {...{children, onSelect, ...props}} />};

  return (
        <Select
          isClearable={true}
          options={availableChoices}
          components={customComponents}
        />
  );
};

谢谢！

Answer 1

handleInputChange = input => {
    this.setState({ open: !!input });
}

<Select
    onInputChange={this.handleInputChange}
    menuIsOpen={this.state.open}
/>

Answer 2

这里是解决方法：当你在React中使用自定义组件时-Select，你也需要传递ref。所以：

const CustomOption = ({children, onSelect, innerRef, innerProps, ...props}) => {
  return (
    <div ref={innerRef} {...innerProps}>
      {children}
          <Chip
            label="SELECT ME"
            onClick={() => onSelect(props.data)}
          />
    </div>
  );
};

const MySelect = ({onSelect) => {
  const customOption = {
    Option: ({ children, innerRef, innerProps,...props }) => <CustomOption {...{children, onSelect, innerRef, innerProps, ...props}} />};

  return (
        <Select
          isClearable={true}
          options={availableChoices}
          components={customComponents}
        />
  );
};

React-select：如何关闭面板？

React-select: how to close panel?

panel

hide

reactjs

react-select