реагиране-избиране предотвратява меню за отваряне на InputChange

Опитвам се да използвам компонента react-select като компонент за въвеждане и избор.

По този начин бих искал да предотвратя отварянето на менюто, докато потребителят въвежда въвеждането.

Просто не мога да намеря начин да актуализирам това поведение чрез опора или чрез актуализиране на метода onInputChange.

Проблемът ми, ако реша да използвам контролирано състояние с подложката menuIsOpen, е, че не мога да успея да отворя отново контролата на менюто, когато е щракнато.

Ето какво имам досега, имате ли идея как може да се постигне това?

<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
Само за пояснение, когато потребителят въвежда, менюто остава затворено, но когато щракнете върху стрелката (или kg във вашия пример), то се отваря?   -  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