web-dev-qa-db-ja.com

Reactの複数のオプションを使用して<select>から値を取得しています

React選択ボックスに対して選択されるオプションを設定する方法は、value属性に対応する<select>自体に特別なvalueプロップを設定することです。選択する<option>要素。 multipleを選択すると、このプロパティは代わりに配列を受け入れることができます。 （編集：現在、ドキュメントはこれへの参照を削除しているようです）

これは特別な属性なので、同じオプションの値の配列で選択されたオプションをretrieve標準的な方法とはどういうことか疑問に思っていますおそらく同じ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>
    );
  }
});
javascriptdomreactjs
62
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);
}
85
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.sliceおよびcallにより、新しい状態のコピーを作成できます。 refを使用してこの方法で値にアクセスすることもできます（イベントをキャプチャしていない場合）。これは質問に対する別の回答でした。

8
rambossa

最も簡単な方法...

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

次は私のために働いた

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

Array.from()およびe.target.selectedOptionsを使用すると、制御されたselect-multipleを実行できます。

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

3
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