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

Posted 2023-03-03

【中文标题】React 无法从选择多个表单中进行选择

【英文标题】：React cannot choose from select multiple form

【发布时间】：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 应该只禁用该特定选项，问题是非禁用选项在选择时会立即取消选择

【参考方案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