在 JSX / React 中通过数组映射后，使第一个 select <option> 为空

Question

  render(){

    let { classes } = this.props;

    let list = classes.map((item, index) => {
      return (
        <option >{item}</option>
      )
    })


    return(
      <div className="filter-bar">

        <form className="sort-form">
          <div className="classSelect">
            <span>select class</span>
              <select name="classSelect" onChange={this.handleClassChange}}>
                <option selected="selected"  >Please choose class</option>
                {list}
              </select>
          </div>
        </form>
      </div>
    )
  }
};

我想映射一个数组并使用每个元素作为选择下拉列表中的选项，并且还有一个额外的空白选项，该选项默认为单击下拉列表。

目前，我拥有的额外内容可在列表中使用，但默认值始终是数组中的第一个元素，而我希望默认值是“请选择您的班级”

有人可以解释一下吗？

Answer 1

  render(){

const classes = [
  'Lorem',
  'Ipsum',
  'dolor',
  'Sit',
  'ames'
]

let list = classes.map((item, index) => {
  return (
    <option >{item}</option>
  )
})


return(
  <div className="filter-bar">
    <form className="sort-form">
      <div className="classSelect">
        <span>select class</span>
          <select name="classSelect" onChange={this.handleClassChange.bind(this)} defaultValue="none">
            <option value="none" disabled hidden> 
            </option> 
            {list}
          </select>
      </div>
    </form>
  </div>
)

您可以将disabledandhidden <option>与 value 一起使用"none"。selected您应该defaultValue="none"在父级上使用该属性，而不是使用<select>该属性，以符合现代反应要求。