react select 显示和隐藏菜单列表

Question

我正在尝试使用 react-select。我有一定的条件（布尔值），当参数是 true 时，react-select 的一些 property/attribute 会根据逻辑改变。一个，如果他们是 menuList。我的 objective，如果参数是 true，我希望 menuList 显示并可搜索，但是当 false 时，我希望 menuList 隐藏但仍然可用（没有禁用，这就是为什么我使用 onChange 和 onInputChange prop）。这是我目前的设置：

const isExist = true;
    return (
      <div style={{ width: '50%', margin: 20 }}>
        <Select
          id="asd"
          value={selectedOption}
          onChange={isExist ? this.handleChange : null}
          onInputChange={isExist ? null : e => this.tests(e) }
          options={options}
          isClearable={true}
          styles={style}
          placeholder="Please type"
          noOptionsMessage={() => isExist ? 'Zero Result' : null}
          components={{ MenuList: () => isExist ? 'display the menu but how?' : null }}
        />
      </div>
    );

任何帮助都会有所帮助。谢谢！

Answer 1

根据您描述的行为，您可以使用这样的受控 menuIsOpen 道具：

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

    this.state = {
      isExist: false,
      menuIsOpen: false,
      selectedOption: null
    };
  }

  onChange = e => {
    this.setState({
      selectedOption: e
    });
  };

  onInputChange = (options, { action }) => {
    if (this.state.isExist) {
      if (action === "menu-close") {
        this.setState({ menuIsOpen: false });
      }
    } else {
      if (action === "input-change") {
        // do whatever you want with the entered value
      }
    }
  };

  onFocus = e => {
    if (this.state.isExist) this.setState({ menuIsOpen: true });
  };

  render() {
    return (
      <div style={{ width: "50%", margin: 20 }}>
        <Select
          id="asd"
          value={this.state.selectedOption}
          onFocus={this.onFocus}
          onChange={this.onChange}
          onInputChange={this.onInputChange}
          options={options}
          isClearable={true}
          placeholder="Please type"
          noOptionsMessage={() => (this.state.isExist ? "Zero Result" : null)}
          menuIsOpen={this.state.menuIsOpen}
        />
      </div>
    );
  }
}

这里是live example.

react select 显示和隐藏菜单列表

react select show and hide menuList

select

reactjs

react-select