防止 React-Select 永远空白

Question

我们在表单中使用 React-Select。我们希望有一个永远不能为空的 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，但 select 字段仍然可以为空。有没有办法防止空白成为一个选项？

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

防止 React-Select 永远空白

Prevent React-Select from ever being blank

javascript

typescript

reactjs

react-select