Предотвратить React-Select от того, чтобы быть пустым - PullRequest
0 голосов
/ 28 июня 2018

Мы используем React-Select в наших формах. Мы хотели бы иметь выпадающий список выбора, который никогда не может быть пустым (аналогично include_blank: false в SimpleForm Rail).

<Select
  simpleValue={true}
  id={input.name} {...input} {...inputHtml}
  className={inputClass}
  name="form-field-name"
  value={value}
  onChange={this.handleChange}
  options={selectOptions}
  multi={this.props.multi}
  clearable={false}
/>

Я передаю параметры (которые появляются, и задаю для очищаемого значения значение false, но поле выбора все еще может быть пустым. Есть ли способ, чтобы пробел даже не был параметром?

1 Ответ

0 голосов
/ 28 июня 2018

Если вы игнорируете установку selectedOption, когда не получаете опцию обратного вызова onChange, она будет работать как положено:

Пример

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

    const options = [
      { value: "one", label: "One" },
      { value: "two", label: "Two" }
    ];
    this.state = {
      options,
      selectedOption: options[0]
    };
  }

  handleChange = selectedOption => {
    if (selectedOption) {
      this.setState({ selectedOption });
    }
  };

  render() {
    const { options, selectedOption } = this.state;
    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={options}
        clearable={false}
      />
    );
  }
}
...