React：如何将Select选项值映射到State键？

嘿，恭喜你已经解决了问题！刚好借着你的情况，聊聊新手在React里用Select组件绑定state时容易踩的坑，说不定能帮你以后更快排查类似问题～

通常用input的方法在Select上失效，大概率是这几个原因：

• 没给Option设置value属性：
  这是最常见的！Input可以直接通过event.target.value取到输入值，但Select的选中值是来自对应Option的value属性。如果你的Option只写了显示文本没加value，那event.target.value会是空或者默认值，自然没法更新state。比如要改成这样：

  <option value="hd_profile">高清转码</option>
  

• 类组件中事件处理函数的this没绑定：
  如果你用的是类组件，要是处理Select onChange的方法没绑定this（比如没在constructor里用bind，也没写成箭头函数），那调用this.setState时会找不到正确的上下文，看起来就像是“方法没生效”。推荐用箭头函数写法：

  handleProfileChange = (e) => {
    this.setState({ transcode_profile: e.target.value });
  }
  

• 没把Select设为受控组件：
  要让Select和state双向同步，必须给Select绑定value属性到this.state.transcode_profile，不然它就是非受控组件，没法通过onChange更新state。完整的受控Select应该是这样：

  <select
    value={this.state.transcode_profile}
    onChange={this.handleProfileChange}
  >
    <option value="hd">高清</option>
    <option value="sd">标清</option>
  </select>
  

既然你已经解决了问题，说不定就是踩了上面某一个小坑～以后遇到表单组件绑定的问题，先检查这几点准没错！

内容的提问来源于stack exchange，提问作者death and gravity