Reactjs與LinkedStateMixin並選擇多個選項

Question

使用Reactjs，我想有一個handleChange方法處理所有我的表單元素的修改。

據我所知，LinkedStateMixin存在這個原因，那我應該用

render: function() { 
    return <select multiple={{ true }} valueLink={this.linkState('value')}>...options...</select>; 
    } 

綁定我的選擇元素的狀態。

但似乎這種做事方式不適用於多選：state.value更新，但只有一個值（當我選擇2個選項時，我可以看到React更新DOM並系統地刪除一個的選擇）。

所以我的問題是：LinkedStateMixin是這個用例的死衚衕嗎？你如何處理這個選擇多重用例？

Answer 1

根本問題是.value對於具有multiple屬性的select元素僅返回其包含的第一個選定選項元素的值。因此，當ValueLink mixin調用event.target.value以獲取select的新值時，它不返回所需的數組以使value屬性有效。

你可以圍繞select建立一個小包裝來完成這項工作;這裏是我的版本（plus a JSFiddle example）：

// A select element that supports `multiple` and `valueLink` correctly 
var BetterSelect = React.createClass({ 
    render: function() { 
    if (this.props.valueLink) { 
     return this.transferPropsTo(
     <select value={this.props.valueLink.value} 
       valueLink={null} onChange={this.handleChange}> 
      {this.props.children} 
     </select> 
    ); 
    } else { 
     return this.transferPropsTo(
     <select onChange={this.handleChange}> 
      {this.props.children} 
     </select> 
    ); 
    } 
    }, 

    handleChange: function(e) { 
    var selectedValue; 
    if (this.props.multiple) { 
     // We have to iterate the `options` elements 
     // to figure out which ones are selected. 
     selectedValue = []; 
     var options = e.target.options; 
     for (var i = 0, l = options.length; i < l; i++) { 
     if (options[i].selected) { 
      selectedValue.push(options[i].value); 
     } 
     } 
    } else { 
     selectedValue = e.target.value; 
    } 

    // Fire onChange manually if it exists since we overwrote it 
    this.props.onChange && this.props.onChange(e); 

    // Finally, manually take care of any valueLink passed 
    if (this.props.valueLink) { 
     this.props.valueLink.requestChange(selectedValue); 
    } 
    } 
}); 


// Let's try it out: 
var Application = React.createClass({ 
    mixins: [React.addons.LinkedStateMixin], 

    getInitialState: function() { 
    return { value: ['Apples', 'Oranges'] }; 
    }, 

    render: function() { 
    return (
     <div> 
     <pre>{JSON.stringify(this.state.value)}</pre> 
     <BetterSelect multiple valueLink={this.linkState('value')}> 
      <option value='Apples'>Apples</option> 
      <option value='Bananas'>Bananas</option> 
      <option value='Oranges'>Oranges</option> 
     </BetterSelect> 
     </div> 
    ); 
    } 
});