React 无法从选择多个表单中进行选择答案

【问题标题】：React cannot choose from select multiple formReact 无法从选择多个表单中进行选择
【发布时间】：2016-11-12 22:10:04
【问题描述】：

所以我在 React.js 中创建了一个select multiple 表单，但是每次生成选项时，我都无法选择选项。如果我点击一个选项，它会立即取消突出显示且未被选中。

React.DOM.div({
  className: 'form-group'
}, React.DOM.select({
     multiple: true,
     name: 'team_players',
     value: this.state.team_players,
     onChange: this.handleArrayChange
}, React.DOM.option({
     value: '',
     disabled: true
}, 'Select Players'), (function() {
    var i, len, ref, results;
    ref = this.state.players;
    results = [];
    for (i = 0, len = ref.length; i < len; i++) {
       player = ref[i];
       results.push(React.DOM.option({
       key: player.id,
       value: player.detail.inputs["NAME"]
    }, player.detail.inputs["NAME"]));
 }
 return results;
}).call(this)));

*请注意，这是我的咖啡脚本版本通过 js2.coffee 生成的 js 版本：*

React.DOM.div
className: 'form-group'
React.DOM.select
  multiple: true
  name: 'team_players'
  value: @state.team_players
  onChange: @handleArrayChange
  React.DOM.option
    value: ''
    disabled: true
    'Select Players'
    for player in @state.players
      React.DOM.option
      key: player.id
      value: player.detail.inputs["NAME"]
      player.detail.inputs["NAME"]

我的 handleArrayChange 函数是这样的：

({
handleArrayChange: function(e) {
  var i, len, name, obj, option, options, team_array;
  options = e.target.options;
  name = e.target.name;
  team_array = [];
  for (i = 0, len = options.length; i < len; i++) {
    option = options[i];
    team_array.push(option);
  }
  return this.setState((
    obj = {},
    obj["" + name] = team_array,
    obj
  ));
}
});

并以它的咖啡形式：

handleArraychange: (e) ->
  options = e.target.options
  name = e.target.name
  team_array = []
  for option in options 
    team_array.push option
  @setState "#{name}": team_array

为什么这个表单不能正确处理我的输入？

【问题讨论】：

disabled: true 应该只禁用该特定选项，问题是非禁用选项在选择时会立即取消选择

标签： javascript jquery forms reactjs coffeescript

【解决方案1】：

您将team_array 状态设置为option HTML 元素的数组，而不是字符串数组。试试这个：

handleArraychange: (e) ->
  options = e.target.options
  name = e.target.name
  team_array = []
  for option in options 
    team_array.push option.value
  @setState "#{name}": team_array

【讨论】：