javascript - 如何在 React 中使用 prop 双向绑定(bind) select 元素

Question

在 react 中创建选择元素的批准方法是什么，它与包含选择的组件的 Prop 有两种方式绑定(bind)？默认选择应该是 prop 的当前属性(可以生成，因为该值是任意的，并且在选择时 prop 属性应该反射(reflect)选择。此外，应该可以将值直接写入选择字段。

Answer 1

我将选项添加到状态数组中，然后映射它们， 试试这个代码

import React, { Component } from 'react'

class SelectExample extends Component {
  constructor() {
    super()
    this.state = {
      options: ['One', 'Tow', 'Three'],
      selectedOption: 'One',
    }
  }

  handleChange = e => {
    this.setState({
      [e.target.name]: e.target.value,
    })
  }

  render() {
    return (
      <select name='selectedOption' onChange={this.handleChange}>
        {this.state.options.map(i => i == this.state.selectedOption ? (
        <option value={i} selected>
          {i}
        </option>
        ) : (<option value={i}>{i}</option>) )}
      </select>
    )
  }
}