Question

我们在表单中使用React-Select。我们希望有一个选择下拉列表，该下拉列表永远不能为空（类似于Rails的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

如果在没有获得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}
      />
    );
  }
}

防止React-Select成为空白

1 个答案: