it-swarm.com.ru

Получение значения из <select> с несколькими опциями в React

Способ React, позволяющий установить, какая опция выбрана для поля выбора, состоит в том, чтобы установить специальную опору value для самого <select>, соответствующую атрибуту value в элементе <option>, который вы хотите выбрать. Для выбора multiple этот реквизит может вместо этого принять массив. (Изменить: В настоящее время в документации, похоже, удалена ссылка на это)

Теперь, поскольку это особый атрибут, мне интересно, каков канонический способ извлечь выбранные опции в одном и том же массиве опционных значений -структура, когда пользователь что-то меняет (поэтому я могу передать его через обратный вызов родительскому компоненту и т. д.), поскольку, вероятно, такое же свойство 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>
    );
  }
});
55
Inkling

Так же, как и в любом другом месте, поскольку вы работаете с реальным 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);
}
72
Jonny Buchanan

Если вы хотите использовать 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);
11
Max Podriezov

В случае, если вы хотите отслеживать выбранные параметры во время заполнения формы:

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.sliceand call позволяет нам создать его копию для нового состояния. Вы также можете получить доступ к значениям таким образом, используя ссылку (в случае, если вы не захватываете событие), что было еще одним ответом на вопрос. 

7
rambossa

Самый простой способ...

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

Следующее сработало для меня

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

С 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

2
Mendes

Еще один способ сделать это:

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

На самом деле вы можете найти selectedOptions внутри цели ... не нужно перебирать все параметры. Представим, что вы хотите отправить значения в функцию onChange, переданную вашему компоненту в качестве реквизита: вы можете использовать следующую функцию в onChange вашего множественного выбора.

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

Попробуй это:

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>
0
Slavi Vatahov