React中多个原生<select>元素的selected属性失效问题

给不同的select设置独一无二的key，React就会识别它们是不同的元素，不会复用DOM节点，而是重新创建新的select元素，这样就能遵循你设置的selected属性。

修改后的代码示例：

class SelectGroup extends Component {
  // ...其他代码

  render () {
    let activeSelect

    switch (this.props.foo) {
      case 'select1':
        activeSelect = <select id="select1" key="select1">
          <option value="1a" selected>1 A</option>
          <option value="1b">1 B</option>
          <option value="1c">1 C</option>
        </select>
        break
      case 'select2':
        activeSelect = <select id="select2" key="select2">
          <option value="2a" selected>2 A</option>
          <option value="2b">2 B</option>
          <option value="2c">2 C</option>
        </select>
        break
      // ...其他case
    }

    return activeSelect
  }

  // ...其他代码
}

方案2：使用受控组件（推荐用于需要跟踪选中状态的场景）

通过React的状态控制select的选中值，每次props.foo变化时，重置选中值为对应select的第一个选项值，完全遵循React的数据流。

代码示例：

class SelectGroup extends Component {
  state = {
    selectedValue: ''
  }

  componentDidUpdate(prevProps) {
    if (prevProps.foo !== this.props.foo) {
      // 根据当前切换的select设置默认选中值
      const defaultValues = {
        select1: '1a',
        select2: '2a'
        // 其他select的默认值
      }
      this.setState({ selectedValue: defaultValues[this.props.foo] })
    }
  }

  handleChange = (e) => {
    this.setState({ selectedValue: e.target.value })
  }

  render () {
    let activeSelect

    switch (this.props.foo) {
      case 'select1':
        activeSelect = <select 
          id="select1" 
          value={this.state.selectedValue} 
          onChange={this.handleChange}
        >
          <option value="1a">1 A</option>
          <option value="1b">1 B</option>
          <option value="1c">1 C</option>
        </select>
        break
      case 'select2':
        activeSelect = <select 
          id="select2" 
          value={this.state.selectedValue} 
          onChange={this.handleChange}
        >
          <option value="2a">2 A</option>
          <option value="2b">2 B</option>
          <option value="2c">2 C</option>
        </select>
        break
      // ...其他case
    }

    return activeSelect
  }
}

方案3：手动操作DOM重置选中状态（非受控方式）

如果不想修改组件的数据流，可以在组件更新后，直接操作DOM设置第一个选项为选中状态：

class SelectGroup extends Component {
  // ...其他代码

  componentDidUpdate(prevProps) {
    if (prevProps.foo !== this.props.foo) {
      const currentSelect = document.getElementById(this.props.foo)
      if (currentSelect) {
        // 设置第一个选项为选中
        currentSelect.selectedIndex = 0
      }
    }
  }

  // ...其他代码
}

总结 #

• 方案1（添加key）是最简单直接的解决方式，适合不需要跟踪选中状态的场景；
• 方案2（受控组件）更符合React的设计理念，适合需要对选中状态做后续处理的场景；
• 方案3（手动操作DOM）属于兜底方案，尽量优先使用前两种方法。

内容的提问来源于stack exchange，提问作者inejwstine