2016-07-11 5 views
2

React.jsにselect multipleフォームを作成していますが、オプションが生成されるたびにオプションを選択することはできません。オプションをクリックすると、即座にハイライトされ、選択されません。Reactは複数のフォームを選択できません

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))); 

*これはようになり、私のCoffeeScriptのバージョンから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 

このフォームが入力を適切に処理しないのはなぜですか?

+0

'disabled:true'はその特定のオプションのみを無効にする必要があります。選択されていれば無効になっていないオプションは直ちに選択解除されるという問題があります – uccblack

答えて

2

オプションHTMLエレメントの配列としてteam_array状態を設定しています。文字列の配列ではありません。

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 
関連する問題