React-选择如何保持菜单打开/关闭的默认行为以及添加到单击按钮时打开的菜单？

Question

我有一个react-select组件来在api上执行搜索，还有一个按钮来开始搜索。

我尝试在单击按钮后设置 menuIsOpen={true} 但它破坏了原始的焦点模糊行为，菜单不再关闭模糊。 尝试在输入上设置 .focus() 但没有打开菜单。

当前的原始行为菜单在焦点时打开，在模糊时关闭，我想保留这一点，而且我想在单击按钮后打开菜单。

Answer 1

要实现您想要的效果，您需要使用受控的

menuIsOpen

道具。

我认为保留

react-select

所有本机功能的最简单方法是使用

onInputChange

和

onFocus

属性的组合，如下代码所示：

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      menuIsOpen: false
    };
  }

  onInputChange = (options, { action }) => {
    if (action === "menu-close") {
      this.setState({ menuIsOpen: false });
    }
  };

  openMenu = () => {
    this.refs.focus();
    this.setState({ menuIsOpen: true });
  };

  render() {
    return (
      <div className="App">
        <Select
          ref={r => {
            this.refs = r;
          }}
          options={options}
          onFocus={this.openMenu}
          onInputChange={this.onInputChange}
          menuIsOpen={this.state.menuIsOpen}
        />

        <button onClick={this.openMenu}>Open Select</button>
      </div>
    );
  }
}

这里有一个实例。

Answer 2

如果你想保持注意力集中行为，你应该这样做 在构造函数中添加引用

    constructor(props) {
        super(props);
        this.state = { open: false }
        this.selectRef = React.createRef();
    }

然后添加这个关闭方法

close() {
        this.setState({ open: false });
        this.selectRef.current.blur();
    }

并在选择组件上

<Select
    closeMenuOnSelect={props.closeMenuOnSelect || true}
    openMenuOnClick={() => this.setState({ open: true })}
    onFocus={() => this.setState({ open: true })}
    onBlur={() => this.setState({ open: false })}
    menuIsOpen={this.state.open}
    onInputChange={() => {
        if (props.closeMenuOnSelect) {
        this.close();
    }
    }}
    ref={this.selectRef}
    >
</Select>

Answer 3

这个选项是一个不错的选择，无需管理状态。

openMenuOnFocus={true}

这也适用于选项卡按钮单击，因为当单击选项卡按钮时，下拉菜单将获得焦点。

Answer 4

我在 React 中使用此功能，仅保持打开一个选项卡，因此当您打开另一个选项卡时，前一个选项卡将被关闭。

const openSingleTab = (id) => {
    const newData1 = data.map((item) => {
        if(item.id === id){
          return {...item, isOpened: !item.isOpened}
        }
        return {...item, isOpened: false}
      })

    setData(newData1)
  }

Answer 5

import React, { useState } from 'react';
import Select from 'react-select';

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' },
];

const CustomSelect = () => {
  const [menuIsOpen, setMenuIsOpen] = useState(false);

  const toggleMenu = () => {
    setMenuIsOpen((prev) => !prev);
  };

  return (
    <div>
      <Select
        options={options}
        menuIsOpen={menuIsOpen}
        onMenuOpen={() => setMenuIsOpen(true)}
        onMenuClose={() => setMenuIsOpen(false)}
      />
      <button onClick={toggleMenu}>
        {menuIsOpen ? 'Close Menu' : 'Open Menu'}
      </button>
    </div>
  );
};

export default CustomSelect;