React-select:如何关闭面板？

Question

我有一个带有自定义选项组件的react-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

以下是解决方案:当您在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}
        />
  );
};

​

Answer 2

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

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