React-Select 如何保持菜單打開/關閉的默認行為以及在按鈕單擊時添加到打開菜單？

Question

我有一個 react-select 組件可以在 api 上進行搜索，還有一個按鈕可以開始搜索。

我嘗試在單擊按鈕后設置 menuIsOpen={true} ，但它破壞了菜單不再關閉模糊的原始焦點模糊行為。 試圖 set.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

我在 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 3

如果你想保留焦點行為，你應該做這樣的事情，在構造函數中添加一個 ref

    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 4

此選項是不錯的選擇，無需管理 state。

openMenuOnFocus={true}

這也適用於選項卡按鈕單擊，因為當單擊選項卡按鈕時，下拉菜單具有焦點。