Reactjs 反应选择显示和隐藏菜单列表

我正在尝试使用react select。我有特定的布尔条件，当param为true时，react select的某些属性/属性将根据逻辑进行更改。如果他们是美努利主义者。我的目标是，如果参数为true，我希望菜单列表显示并可搜索，但如果为false，我希望菜单列表隐藏但仍可用，而不是禁用，这就是我使用onChange和onInputChange属性的原因。以下是我到目前为止设置的内容：

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>
    );

---

任何帮助都会有帮助。谢谢大家!

根据您描述的行为，您可以使用如下受控菜单打开道具：

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>
    );
  }
}

---

这里有一个。

但是如果我使用isDisabled，我就无法在输入中键入任何内容。我需要保持输入可用，只有当参数为false时将隐藏的菜单列表。这就是为什么我在参数为true时使用onChange，在参数为false时使用onInputChange来获取用户键入/选择的值。但是，如果参数为true，我不知道如何显示菜单列表，因此用户可以在输入中键入汇总，但菜单不会打开，也不能输入任何选项，对吗？是的，从所选列表中没有选项。所以，用例是，我有一个复选框，如果复选框被选中，那么select有一个菜单列表，用户可以搜索并选择我使用onChange得到的值。但是，如果没有选中复选框，用户可以键入输入，但不显示菜单列表，我通过onInputChange获得了用户输入的值event@Akza我已经更新了我的代码以提供不同的方法。非常感谢！你拯救了我的夜晚！这样我就可以安睡了：