HTML JS选择带有默认选项

Question

我有一个如下所示的select元素。 当用户选择一个选项时，将this.handleSelectClass ，它依次呈现另一个输入字段。（select语句位于Bootstrap模式中）

 <select class="form-control" onChange={this.handleSelectClass}>
          <option>Small</option>
          <option>Medium</option>
          <option>Large</option>
  </select>

但是，我注意到，如果我打开表单并选择第一个选项，则不会呈现任何内容。 这可能是因为React没有看到任何更改，因此它没有调用onChange 。

所以我尝试添加一个空选项。

<select class="form-control" onChange={this.handleSelectClass}>
              <option><option>
              <option>Small</option>
              <option>Medium</option>
              <option>Large</option>
</select>

现在的问题是，在第一个选择之后，empty选项仍保留在选项列表中，这使列表看起来很丑陋，并且当我选择empty选项时，也会使程序抛出错误。

我也尝试仅在未选择类别时显示空选项。

<select class="form-control" onChange={this.handleSelectClass}>
                  {!this.state.categorySelected ? <option></option> : <div></div>}
                  <option>Small</option>
                  <option>Medium</option>
                  <option>Large</option>
</select>

但是，这也行不通，因为select元素处于模式中。 如果选择“ Small并关闭模态，则再次打开它时，默认选项将为“ Small而不是空选项。

如何使每次打开包含模式的菜单都具有默认选项呢？ 然后，在做出第一个选择之后，我希望默认选项消失。

Answer 1

要创建HTML select元素，可以使用默认的选定项将禁用的，选定的属性应用于option元素。

http://codepen.io/anon/pen/qOvqrL

<select class="form-control">
      <option disabled selected>Default option</option>
      <option>Small</option>
      <option>Medium</option>
      <option>Large</option>
</select>

Answer 2

使用select和React时，除了使用常规的selected属性之外，您还必须进行其他操作 ，才能生成具有默认值的受控组件。

通过将value prop添加到实际select您将获得与具有selected属性的普通HTML选择相同的输出。 再加上普通的onChange处理程序，将使其具有交互性和美观性。

var Select = React.createClass({
    getInitialState: function () {
        return {selectValue: 'C'};
    },
    onChange: function (event) {
        this.setState({selectValue: event.target.value});
    },
    render: function() {
        return <select value={this.state.selectValue} onChange={this.onChange}>
            <option value="A">default</option>
            <option value="B">first</option>
            <option value="C">second</option>
        </select>;
    }
});