javascript - 在 JSX/React 中通过数组映射后，首先选择 <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>
    )
  }
};

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

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

谁能解释一下吗？

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

您可以使用 disabled和hidden <option>值(value)"none" 。而不是使用 selected属性，然后您应该使用 defaultValue="none"在父级 <select>符合现代 react 要求。