प्रतिक्रिया में एकाधिक विकल्प के साथ <select> से पुनर्प्राप्त मूल्य

Question

किसी चुनिंदा बॉक्स के लिए कौन सा विकल्प चुना जाता है, इस पर प्रतिक्रिया करने का तरीका यह है कि जिस तत्व को आप चुनना चाहते हैं, उस विशेषता के अनुरूप, स्वयं 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>
    );
  }
});

Answer 1

के साथ 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

Comments

एकाधिक विकल्पों में से चयनित विकल्पों selectको एक सरणी में संयोजित करने के बारे में कोई विचार ? उन सभी के माध्यम से हथियाने के बाद कहो document.querySelectorAll('select')?

— कासिमिर

ध्यान दें कि जिस समय यह प्रश्न पूछा गया था, selectedOptionsउसमें अच्छी संगतता नहीं थी, और अभी भी IE द्वारा समर्थित नहीं है। हालांकि यह इसे करने का आधुनिक तरीका होगा।

— इंकल

Answer 2

उसी तरह से आप कहीं और भी करते हैं, क्योंकि आप वास्तविक 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);
}

Comments

CoffeeScript संस्करण:(option.value for option in e.target.options when option.selected)

— 1j01

ES6 संस्करण: [... event.target.options] .filter (o => o.selected) .map (o => o.value)

— svachalek

आप ES6 तीरों को भी नष्ट कर सकते हैं:[...e.target.options].filter(({selected}) => selected).map(({value}) => value)

— मैथ्यू एम-गोसलिन

पुन :: ES6 संस्करण, जबकि यह सही लग रहा है यह काम नहीं करता है। event.target.optionsएक HTMLOptionsCollection, एक ऐरे नहीं है।

— TrueWill

@ ज़िशर नेगेटिव, घोस्ट राइडर। HTMLOptionsCollectionयह चलने योग्य नहीं है। हालाँकि, Array.fromअभी भी इसके साथ काम करता है: Array.from(event.target.options).filter(o => o.selected).map(o => o.value)

— बॉन्डोलिन

Answer 3

सबसे आसान तरीका...

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

Comments

यह अच्छा है, लेकिन HTMLCollectionOf<HTMLOptionElement>यह एक सरणी नहीं है ... जाहिर Array.fromहै, हालांकि काम करता है। stackoverflow.com/a/49684109/29182

— Ziggy

Answer 4

यदि आप उपयोग करना चाहते हैं 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 ईएस 6 अपडेट

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

Comments

यह मेरे जवाब के लिए स्थानापन्न करने के लिए उपयोग करेगा, चूंकि selectedOptionsIE में समर्थित नहीं है

— rambossa

यहाँ एक बहुत क्लीनर है, इसे करने के लिए es6 तरीका :) [] .filter.call (यह। Coss.selectRef.options, o => o.selected) .map (o => o.value);

— डीजी

Answer 5

इस मामले में आप चुने हुए विकल्पों पर नज़र रखना चाहेंगे, जबकि फॉर्म पूरा हो रहा है:

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

selectedOptionsDOM से संबंधित तत्वों की एक सरणी जैसा संग्रह / सूची है। आप विकल्प मानों का चयन करते समय ईवेंट टारगेट ऑब्जेक्ट में इसे एक्सेस करते हैं। Array.prototype.sliceऔर callहमें नए राज्य के लिए इसकी एक प्रति बनाने की अनुमति देता है। आप रेफरी का उपयोग करके मूल्यों को इस तरह से एक्सेस कर सकते हैं (यदि आप ईवेंट को कैप्चर नहीं कर रहे हैं), जो सवाल का एक और जवाब था।

Comments

जैसा कि मेरी अन्य टिप्पणियों में से एक में उल्लेख किया गया है, के लिए ब्राउज़र समर्थन selectedOptionsबहुत स्केच लगता है। लेकिन अगर समर्थन होता तो शायद यह आदर्श समाधान होता।

— इंकलिंग

यह सच है, ऐसा लगता है कि IE अभी भी इस का समर्थन नहीं करता है

— rambossa

Answer 6

आप वास्तव selectedOptionsमें लक्ष्य के अंदर पा सकते हैं ... सभी विकल्पों पर पुनरावृति करने की आवश्यकता नहीं है। आइए कल्पना करें कि आप onChangeअपने घटक को दिए गए फ़ंक्शन को मानों को प्रॉपर के रूप में भेजना चाहते हैं : आप onChangeअपने एकाधिक चयन के आधार पर निम्नलिखित फ़ंक्शन का उपयोग कर सकते हैं ।

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

Comments

जिस समय यह प्रश्न पूछा गया था, उस समय selectedOptionsअनुकूलता नहीं थी। यह अभी भी इंटरनेट एक्सप्लोरर द्वारा समर्थित नहीं है, इसलिए वास्तव में उपयोग करने योग्य नहीं है यदि आप IE समर्थन चाहते हैं (कम से कम पॉलीफ़िल के बिना)।

— इंकलाब

Answer 7

निम्नलिखित ने मेरे लिए काम किया

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

Comments

सही है, मैंने कई मूल्यों को पुनः प्राप्त करने के लिए JQuery का उपयोग किया।

— मंटिश

आपको रिएक्शन डोम या jQuery की आवश्यकता नहीं है। बस

— ऑनकचेंज

Answer 8

इसे करने का दूसरा तरीका:

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

Answer 9

इसको आजमाओ:

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>

Comments

अपने समाधानों में कुछ और स्पष्टीकरण जोड़ें।

— Manmohan_singh