реагировать выберите показать и скрыть menuList - PullRequest
Новая
       12

реагировать выберите показать и скрыть menuList

0 голосов
/ 18 февраля 2019

Я пытаюсь использовать реагировать на выбор.У меня есть определенное условие (булево), когда параметр равен true, некоторые свойства / атрибут реакции-выбора будут меняться в зависимости от логики.Один, если они menuList.Моя цель: если параметр равен true, я хочу, чтобы menuList отображался и был доступен для поиска, но когда false, я хочу, чтобы menuList был скрыт, но все еще был доступен (не отключен, поэтому я использую 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>
    );

любая помощь будет полезна.Спасибо!

1 Ответ

0 голосов
/ 18 февраля 2019

Исходя из описанного вами поведения, вы можете использовать управляемые 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>
    );
  }
}

Здесь живой пример .

...