реагировать-выбрать запретить открытие меню onInputChange

Я пытаюсь использовать компонент react-select в качестве входа и компонента выбора.

При этом я хотел бы предотвратить открытие меню, когда пользователь вводит ввод.

Я просто не могу найти способ обновить это поведение ни опорой, ни обновлением метода onInputChange.

Моя проблема, если я решаю использовать контролируемое состояние с опорой menuIsOpen, заключается в том, что мне не удается повторно открыть элемент управления Menu, который был нажат.

Вот что у меня есть, ребята, вы хоть представляете, как этого можно достичь?

<StyledSelect
  components={{ IndicatorSeparator }}
  {..._.omit(this.props, [])}
  filterOption={() => true}
  inputValue={inputValue}
  onChange={value => {
    this.select.setState({ menuIsOpen: false });
    this.setState({ selectValue: value });
  }}
  onInputChange={(value, event) => {
    if (event && event.action === 'input-change') {
      this.setState({ inputValue: value });
    }
  }}
  openMenuOnClick={false}
/>

Пример


reactjs react-select
person Junior    schedule 04.01.2019    source источник
comment
Чтобы уточнить, когда пользователь вводит, меню остается закрытым, но когда вы нажимаете на стрелку (или кг в вашем примере), оно открывается?   -  person Laura    schedule 04.01.2019
comment
Да, именно этого я и хочу.   -  person Junior    schedule 04.01.2019

Ответы (1)


arrow_upward
3
arrow_downward

Я думаю, что вы в правильном направлении, используя onInputChange, и я бы добавил управляемые menuIsOpen реквизиты, например следующий код:

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

    this.state = {
      menuIsOpen: false
    };
  }

  openMenu = () => {
    this.setState({ menuIsOpen: !this.state.menuIsOpen });
  };

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

  render() {

    const DropdownIndicator = props => {
      return (
        components.DropdownIndicator && (
          <div
            onClick={this.openMenu}
            style={{ display: "flex", alignItems: "center" }}
          >
            <span style={{ marginLeft: 12 }}>kg</span>
            <components.DropdownIndicator
              {...props}
              onClick={() => {
                console.log("ici");
              }}
            />
          </div>
        )
      );
    };

    return (
      <Select
        components={{ DropdownIndicator }}
        options={options}
        onChange={this.onChange}
        onInputChange={this.onInputChange}
        menuIsOpen={this.state.menuIsOpen}
      />
    );
  }
}

Идея этого кода состоит в том, чтобы запустить событие onClick в пользовательском компоненте DropdownIndicator.

Вот живой пример.

person Laura    schedule 04.01.2019
comment
Спасибо! это то, что я искал. Я не мог придумать способ передать опору компоненту, но не подумал объявить ее в методе рендеринга. - person Junior; 07.01.2019