React，不能select第一个选项<select>

Question

我渲染了一个 <select> 框以响应数组。我的数组如下所示：

options: [
    {"id":1,"name":"Option1"},
    {"id":2,"name":"Option2"},
    {"id":3,"name":"Option3"}
    ];

我 map 数组并找到所有选项，然后我在 map 内渲染选项。但是我可以 select select 中的任何选项，除了第一个。

这是我的 select:

<select
    className="form-control"
    name={this.props.name}
    onChange={this.handleChange.bind(this)}>
    {(Array.isArray(this.props.options) && this.props.options.length > 0) ? this.props.options.map(option => {
        return (
            <option key={option.id} value={option.id}>{option.name}</option>
        )
    }) : (<option>No Options Found</option>)}
</select>

我该怎么做，才能select第一个选项？我做错了什么？

Answer 1

默认情况下，您的第一个选项是 selected。如果你愿意 - 你可以创建一个空选项，然后你可以 select 第一个选项。

render() {
    const options = this.props.options.map(option =>
      <option key={option.id} value={option.id}>{option.name}</option>
    )

    return (
      <select
        className="form-control"
        name={this.props.name}
        onChange={this.handleChange.bind(this)}
      >
        <option value="">Select option</option>
        {options}
      </select>
    )
  }

Answer 2

在您的选项前添加默认行

<option>select size</option>
quickview_product.map(itm => <option value={itm.label}>{itm.label}</option>)

React，不能select第一个选项<select>

React, can't select the first option of <select>

select

jsx

reactjs

react-jsx