HTML JS 选择默认选项

Question

我有一个select 元素，如下所示。当用户选择一个选项时，this.handleSelectClass 被调用，这反过来又呈现另一个输入字段。（选择语句在 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>

现在的问题是，在第一次选择之后，空选项保留在选项列表中，这使得列表看起来很难看，并且当我选择空选项时，也会让我的程序抛出错误。

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

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

但是，这也不起作用，因为选择元素处于模式中。 如果我选择 Small 并关闭模式，当我再次打开它时，默认选项将是 Small 而不是空选项。

我怎样才能使每次打开包含模式时都有一个默认的选择选项？然后，在我做出第一个选择后，我希望默认选项消失。

Answer 1

要创建一个 HTML 选择元素，使用默认选中项，您可以将禁用的属性应用于选项元素。

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 时，您必须生成some other trickery 而不是仅仅使用普通的selected 属性才能生成一个选择了默认值的受控组件。

通过将value 属性添加到实际的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>;
    }
});