javascript - 防止 React-Select 永远为空

Question

我们在表单中使用 React-Select。我们希望有一个永远不能为空的选择下拉列表(类似于 Rail 的 SimpleForm 中的 include_blank: false)。

<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}
/>

我正在传递选项(它们正在出现，并将 clearable 设置为 false，但选择字段仍然可以为空。有没有办法防止空白成为一个选项？

Answer 1

如果在 onChange 回调中没有选项时忽略设置 selectedOption，它将按预期工作:

示例

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}
      />
    );
  }
}