在React中使用多个选项从<select>中检索值

Question

设置为选择框选择哪个选项的React方法是value在<select>自身上设置一个特殊属性,对应于您希望选择value的<option>元素上的属性.对于multipleselect,此属性可以接受数组.(编辑:目前文档似乎已删除对此的引用)

现在因为这是一个特殊属性,我想知道当用户改变事物时,在相同的数组选项值结构中检索所选选项的规范方法是什么(所以我可以通过回调将其传递给父组件等),因为可能value在DOM元素上不可用相同的属性.

要使用示例,使用文本字段,您可以执行类似这样的操作(JSX):

var TextComponent = React.createClass({
  handleChange: function(e) {
    var newText = e.target.value;
    this.props.someCallbackFromParent(newText);
  },
  render: function() {
    return <input type="text" value={this.props.someText} onChange={this.handleChange} />;
  }
});

???这个多选组件的替代等价是什么？

var MultiSelectComponent = React.createClass({
  handleChange: function(e) {
    var newArrayOfSelectedOptionValues = ???;
    this.props.someCallbackFromParent(newArrayOfSelectedOptionValues);
  },
  render: function() {
    return (
      <select multiple={true} value={this.props.arrayOfOptionValues} onChange={this.handleChange}>
        <option value={1}>First option</option>
        <option value={2}>Second option</option>
        <option value={3}>Third option</option>
      </select>
    );
  }
});

Answer 1

与其他任何地方一样,因为您正在使用真正的DOM节点作为change事件的目标:

handleChange: function(e) {
  var options = e.target.options;
  var value = [];
  for (var i = 0, l = options.length; i < l; i++) {
    if (options[i].selected) {
      value.push(options[i].value);
    }
  }
  this.props.someCallback(value);
}

Answer 2

如果你想使用,ref你可以得到这样的选定值:

var select = React.findDOMNode(this.refs.selectRef); 
var values = [].filter.call(select.options, function (o) {
      return o.selected;
    }).map(function (o) {
      return o.value;
    });

2018年ES6更新

  let select = this.refs.selectRef;
  let values = [].filter.call(select.options, o => o.selected).map(o => o.value);

Answer 3

如果您希望在表单完成时跟踪所选选项:

handleChange(e) {
    // assuming you initialized the default state to hold selected values
    this.setState({
        selected:[].slice.call(e.target.selectedOptions).map(o => {
            return o.value;
        });
    });
}

selectedOptions是一个类似于数组的集合/与DOM相关的元素列表.选择选项值时,可以在事件目标对象中访问它.Array.prototype.slice并call允许我们为新状态创建它的副本.你也可以使用ref访问这些值(如果你没有捕获事件),这是问题的另一个答案.

Answer 4

最简单的方法......

handleChange(evt) {
  this.setState({multiValue: [...evt.target.selectedOptions].map(o => o.value)}); 
}

Answer 5

您实际上可以找到selectedOptions目标的内部……无需遍历所有选项。假设您想将值发送到onChange作为 props 传递给组件的函数：您可以在onChange多选中使用以下函数。

onSelectChange = (e) => {
    const values = [...e.target.selectedOptions].map(opt => opt.value);
    this.props.onChange(values);
  };

Answer 6

使用Array.from()和e.target.selectedOptions可以执行受控的选择倍数：

handleChange = (e) => {
  let value = Array.from(e.target.selectedOptions, option => option.value);
  this.setState({values: value});
}

target.selectedOptions返回一个HTMLCollection

https://codepen.io/papawa/pen/XExeZY