Как установить максимальное количество предметов, которые можно выбрать в реагировать на выбор? - PullRequest
Новая
       25

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

4 голосов
/ 12 марта 2019

Я использую компонент CreatableSelect из реагирующего выбора.Теперь пользователи могут выбирать столько элементов, сколько они хотят, но я хочу, чтобы пользователи выбирали не более 5 элементов.Как ограничить максимальное количество опций, которые можно выбрать? 

<CreatableSelect
  classes={classes}
  styles={selectStyles}
  textFieldProps={{
    label: "Tags"
  }}
  options={suggestions}
  components={components}
  value={this.state.multi}
  onChange={this.handleChange("multi")}
  placeholder=""
  isMulti
/>

Ответы [ 2 ]

1 голос
/ 12 марта 2019 
<CreatableSelect
        classes={classes}
        styles={selectStyles}
        options={this.state.multi.length > 4 ? this.state.multi : suggestions}
        components={Components}
        value={this.state.multi}
        placeholder="Tags"
        onChange={(values) => this.setState({ multi: values })}
        isValidNewOption={isValidNewOption} //Look at Marked Answer
        isMulti
/>
1 голос
/ 12 марта 2019

Я рекомендую вам использовать комбинацию пользовательских компонентов Menu и isValidNewOption, например, следующий код: 

// For this example the limite will be 5
    const Menu = props => {
      const optionSelectedLength = props.getValue().length || 0;
      return (
        <components.Menu {...props}>
          {optionSelectedLength < 5 ? (
            props.children
          ) : (
            <div>Max limit achieved</div>
          )}
        </components.Menu>
      );
    };

    function App() {
      const isValidNewOption = (inputValue, selectValue) =>
        inputValue.length > 0 && selectValue.length < 5;
      return (
        <div className="App">
          <Creatable
            components={{ Menu }}
            isMulti
            isValidNewOption={isValidNewOption}
            options={options}
          />
        </div>
      );
    }

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

Идея состоит в том, чтобы запретить пользователю доступ к параметрам после предела X (в данном примере 5), а также предотвратить событие клавиатуры enter при создании через isValidNewOption prop.

...