首页 文章

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

提问于
浏览 265
45

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

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

要使用一个示例,使用文本字段,您可以执行类似这样的操作(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>
    );
  }
});

8 回答

  • 68

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

  • 11

    与其他任何地方一样,因为您正在使用真正的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);
    }
    
  • 7

    以下对我有用

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

    如果你想使用 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);
    
  • 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.slicecall 允许我们为新状态创建它的副本 . 你也可以使用ref访问这些值(如果你没有捕获事件),这是问题的另一个答案 .

  • 2

    另一种方法:

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

    最简单的方式......

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

    试试这个:

    dropdownChanged = (event) => {
        let obj = JSON.parse(event.target.value);
        this.setState(
            {
                key: obj.key,
                selectedName: obj.name,
                type: obj.type
            });
    }
    
    
    <select onChange={this.dropdownChanged} >
    <option value={JSON.stringify({ name: 'name', key: 'key', type: "ALL" })} >All Projetcs and Spaces</option></select>
    

相关问题