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

阿飞阳光2020-03-16

设置选择框选择哪个选项的React方法是value在其<select>自身上设置一个特殊的prop ，与要选择value的<option>元素上的属性相对应。对于一个multiple选择，该道具可以接受数组。（编辑：当前文档似乎已删除对此的引用）

现在，因为这是一个特殊的属性，所以我想知道当用户更改内容时，在相同的option-values-values结构中检索选定选项的规范方法是什么（因此我可以将其通过回调传递给父组件等），因为推测相同的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>
    );
  }
});

逆天泡芙神无2020/03/16 15:21:14

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

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

泡芙小胖2020/03/16 15:21:14

另一种方法是：

handleChange({ target }) {
    this.props.someCallback(
       Array.prototype.slice.call(target.selectedOptions).map(o => o.value)
    )
}

老丝Tom前端2020/03/16 15:21:14

使用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

小宇宙樱2020/03/16 15:21:14

如果您想使用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);

JimJim2020/03/16 15:21:14

最简单的方法

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

卡卡西Near2020/03/16 15:21:14

以下为我工作

var selectBoxObj = React.findDOMNode(this.refs.selectBox)
var values = $(selectBoxObj).val()

JimJim2020/03/16 15:21:14

因为您将真实的DOM节点用作更改事件的目标，所以您在其他任何地方都可以使用相同的方法：

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

小卤蛋小卤蛋2020/03/16 15:21:14

在这种情况下，您希望在填写表格时跟踪所选的选项：

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（如果您不捕获事件）以这种方式访问值，这是该问题的另一个答案。

Newest Answer

HTML5 Drag & Drop 拖动时更改图标/光标

5 Answer

如何完全卸载 Node.js，然后从头重新安装 (Mac OS X)

NUXT引入tailwindcss报错Error: Expected an opening square bracket.

1 Answer