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>

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

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

<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选择元素，使用默认选择项，您可以将选中的属性应用于选项元素。

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

使用默认选项

2 个答案: