रिएक्ट JSX: चयनित <select> विकल्प पर "चयनित" का चयन करें

Question

एक <select>मेनू के लिए रिएक्ट घटक में , मुझे selectedउस विकल्प पर विशेषता सेट करने की आवश्यकता है जो एप्लिकेशन स्थिति को दर्शाता है।

में render(), optionStateराज्य के मालिक से SortMenu घटक में पारित किया जाता है। विकल्प मान propsJSON से पास किए गए हैं ।

render: function() {
  var options = [],
      optionState = this.props.optionState;

  this.props.options.forEach(function(option) {
    var selected = (optionState === option.value) ? ' selected' : '';

    options.push(
      <option value={option.value}{selected}>{option.label}</option>
    );
  });

// pass {options} to the select menu jsx

हालाँकि, जो JSX संकलन पर एक सिंटैक्स त्रुटि को ट्रिगर करता है।

ऐसा करने से सिंटैक्स त्रुटि से छुटकारा मिल जाता है लेकिन स्पष्ट रूप से समस्या का समाधान नहीं होता है:

var selected = (optionState === option.value) ? 'selected' : 'false';

<option value={option.value} selected={selected}>{option.label}</option>

मैंने यह भी आजमाया:

var selected = (optionState === option.value) ? true : false;

<option value={option.value} {selected ? 'selected' : ''}>{option.label}</option>

क्या इसे हल करने का अनुशंसित तरीका है?

Comments

सिर्फ शीर्षक के लिए सवाल को

— उकेरना

Answer 1

प्रतिक्रिया स्वचालित रूप से इस उद्देश्य के लिए बूलियन को समझती है, इसलिए आप बस लिख सकते हैं (नोट: अनुशंसित नहीं)

<option value={option.value} selected={optionsState == option.value}>{option.label}</option>

और यह उचित रूप से 'चयनित' का उत्पादन करेगा।

हालाँकि, रिएक्ट आपके लिए इसे और भी आसान बना देता है। selectedप्रत्येक विकल्प पर परिभाषित करने के बजाय , आप (और चाहिए) बस value={optionsState}चुनिंदा टैग पर लिखें :

<select value={optionsState}>
  <option value="A">Apple</option>
  <option value="B">Banana</option>
  <option value="C">Cranberry</option>
</select>

अधिक जानकारी के लिए, रिएक्ट सेलेक्ट टैग डॉक देखें ।

Comments

प्रतिक्रिया के मौजूदा संस्करण (0.9) के साथ विकल्पों पर चयनित विशेषता सेट करना बिल्कुल भी काम नहीं करता है। इसके बजाय चयन तत्व पर मान विशेषता सेट करें।

— ३.३३३ में लेम्मक्लेनन

मैं ajax.defaultValue के साथ डेटा लोड करता हूं, मेरे लिए काम नहीं कर रहा है। मान काम कर रहा है, लेकिन मैं चुनिंदा सूची पर किसी अन्य आइटम का चयन नहीं कर सकता। लिस्ट खुल रही है, लेकिन जब मैं उनमें से किसी एक का चयन करता हूं तो वह मूल्य आइटम का चयन करता है। कोई विचार?

— user1924375

@ user1924375 आपको ऑनकॉन्ग इवेंट का उपयोग करना चाहिए onChange={this.handleSelect}और अपने घटक के लिए राज्य मान सेट करना चाहिए , उदाहरण के लिए: 'handleSelect: function () {this.setState ({value: event.target.value});}'> यह नए के साथ आपके चुनिंदा घटक को रेंडर करेगा; चयनित आइटम। आशा है कि यह आपकी मदद करेगा।

— funnydaredevil

हालाँकि यह अभी तक प्रलेखित नहीं है, अगर आप सक्षम हैं तो valueप्रोप <select>एक सरणी हो सकता है multiselect।

— tiradc

बल्कि defaultValueआरंभ करने के लिए उपयोग करें

— Dewwwald

Answer 2

जब आप "चयनित" की संपत्ति सेट करने का प्रयास करते हैं तो आप क्या कर सकते हैं, रिएक्ट आपको चेतावनी देता है <option>:

का प्रयोग करें defaultValueया valueपर रंगमंच की सामग्री <select>सेटिंग की बजाए selectedपर <option>।

तो, आप अपने चयन options.valueपर उपयोग कर सकते हैंdefaultValue

Comments

यदि मैं अभी भी उस विकल्प को इंगित करना चाहता हूं जो वर्तमान में चयनित है, तो मैं यह कैसे करूंगा? वर्तमान में मैं जिस तरह से वास्तव में चयनित विकल्प को रखने में सक्षम हूं (और भविष्य के पोस्टिंग के लिए फॉर्म की स्थिति को बनाए रखने के लिए) का चयन करके सेट = सही है। मैंने चयनित तत्व के defaultValue और value props को सेट करने का प्रयास किया है, लेकिन यह विकल्प मेनू में चयनित के लिए सही विकल्प सेट करके दृश्य में प्रस्तुत नहीं करता है। कोई सलाह?

— द पाईड पाइप्स

उदाहरण शायद ??

— शिंज़ो

मेरे लिए काम नहीं कर रहा है: <select className = "form-control" value = "Mois">

— Kuartz

defaultValue नवीनतम संस्करण के साथ काम नहीं करता है

— होश मर्करी

Answer 3

यहां एक संपूर्ण समाधान दिया गया है जिसमें सबसे अच्छा उत्तर और इसके नीचे की टिप्पणियाँ शामिल हैं (जो किसी को इसे एक साथ मिलाने के लिए संघर्ष करने में मदद कर सकता है):

ईएस 6 (2019) के लिए अद्यतन - तीर के कार्यों और ऑब्जेक्ट विनाशकारी का उपयोग करना

मुख्य घटक में:

class ReactMain extends React.Component {

  constructor(props) {
    super(props);
    this.state = { fruit: props.item.fruit };
  }

  handleChange = (event) => {
    this.setState({ [event.target.name]: event.target.value });
  }

  saveItem = () => {
    const item = {};
    item.fruit = this.state.fruit;
    // do more with item object as required (e.g. save to database)
  }

  render() {
    return (
      <ReactExample name="fruit" value={this.state.fruit} handleChange={this.handleChange} />
    )
  }

}

शामिल घटक (जो अब एक स्टेटलेस फंक्शनल है):

export const ReactExample = ({ name, value, handleChange }) => (
  <select name={name} value={value} onChange={handleChange}>
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>
)

प्रीवियस ANSWER (बाइंड का उपयोग करके):

मुख्य घटक में:

class ReactMain extends React.Component {

  constructor(props) {
    super(props);
    // bind once here, better than multiple times in render
    this.handleChange = this.handleChange.bind(this);
    this.state = { fruit: props.item.fruit };
  }

  handleChange(event) {
    this.setState({ [event.target.name]: event.target.value });
  }

  saveItem() {
    const item = {};
    item.fruit = this.state.fruit;
    // do more with item object as required (e.g. save to database)
  }

  render() {
    return (
      <ReactExample name="fruit" value={this.state.fruit} handleChange={this.handleChange} />
    )
  }

}

शामिल घटक (जो अब एक स्टेटलेस फंक्शनल है):

export const ReactExample = (props) => (
  <select name={props.name} value={props.value} onChange={props.handleChange}>
    <option value="A">Apple</option>
    <option value="B">Banana</option>
    <option value="C">Cranberry</option>
  </select>
)

मुख्य घटक फल के लिए चयनित मूल्य को बनाए रखता है (राज्य में), इसमें शामिल घटक चुनिंदा तत्व प्रदर्शित करता है और अपडेट को अपने राज्य को अपडेट करने के लिए मुख्य घटक पर वापस भेज दिया जाता है (जो तब चयनित मूल्य को बदलने के लिए शामिल घटक पर वापस जाता है)।

एक नाम प्रोप के उपयोग पर ध्यान दें जो आपको उनके प्रकार की परवाह किए बिना एक ही रूप में अन्य फ़ील्ड के लिए एकल हैंडलचेंज विधि की घोषणा करने की अनुमति देता है।

Comments

ध्यान दें कि कंस्ट्रक्टर में रेखा this.handleChange.bind(this);होनी चाहिए this.handleChange = this.handleChange.bind(this);

— शेवर

आप में से मेरे जैसे उन लोगों के लिए जो स्वयं से पूछ रहे हैं कि क्या ... का अर्थ है: reactjs.org/docs/jsx-in-depth.html#spread-attributes

— talsibony

@talsibony - यह वास्तव में प्रसार ऑपरेटर है, लेकिन मेरे नमूना कोड में इसका मतलब है कि यहां कुछ अन्य कोड डालें !

— एंडी लॉरेंज

@AndyLorenz तो उस स्थिति में मैं इसे हटाने की सिफारिश करूंगा ... :), या बस टिप्पणी लिख

— दूं

Answer 4

यह कैसे करना है इसका नवीनतम उदाहरण यहां दिया गया है। से डॉक्स प्रतिक्रिया , के साथ साथ स्वत: बाइंडिंग "वसा में तीर" विधि वाक्य रचना।

class FlavorForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {value: 'coconut'};
  }

  handleChange = (event) =>
    this.setState({value: event.target.value});

  handleSubmit = (event) => {
    alert('Your favorite flavor is: ' + this.state.value);
    event.preventDefault();
  }

  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        <label>
          Pick your favorite flavor:
          <select value={this.state.value} onChange={this.handleChange}>
            <option value="grapefruit">Grapefruit</option>
            <option value="lime">Lime</option>
            <option value="coconut">Coconut</option>
            <option value="mango">Mango</option>
          </select>
        </label>
        <input type="submit" value="Submit" />
      </form>
    );
  }
} 

Answer 5

बस अपने चयनित टैग के पहले विकल्प के रूप में जोड़ें:

<option disabled hidden value=''></option>

यह डिफ़ॉल्ट हो जाएगा और जब आप एक वैध विकल्प का चयन करेंगे तो आपके राज्य पर बस जाएगा

Answer 6

***Html:***
<div id="divContainer"></div>

var colors = [{ Name: 'Red' }, { Name: 'Green' }, { Name: 'Blue' }];
var selectedColor = 'Green';

ReactDOM.render(<Container></Container>, document.getElementById("divContainer"));

var Container = React.createClass({
    render: function () {
        return (
        <div>            
            <DropDown data={colors} Selected={selectedColor}></DropDown>
        </div>);
    }
});

***Option 1:***
var DropDown = React.createClass(
{
    render: function () {
        var items = this.props.data;
        return (
        <select value={this.props.Selected}>
            {
                items.map(function (item) {
                    return <option value={item.Name }>{item.Name}</option>;
                })
            }
        </select>);
    }
});

***Option 2:***
var DropDown = React.createClass(
{
    render: function () {
        var items = this.props.data;
        return (
        <select>
            {
                items.map(function (item) {
                    return <option value={item.Name} selected={selectedItem == item.Name}>{item.Name}</option>;
                })
            }
        </select>);
    }
});

***Option 3:***
var DropDown = React.createClass(
    {
        render: function () {
            var items = this.props.data;
            return (
            <select>
                {
                    items.map(function (item) {

                                            if (selectedItem == item.Name)
                    return <option value={item.Name } selected>{item.Name}</option>;
                else
                    return <option value={item.Name }>{item.Name}</option>;
                    })
                }
            </select>);
        }
    });

Comments

हालांकि कोई स्पष्टीकरण नहीं दिया गया था, वास्तव में एक की जरूरत नहीं थी। एक ही समस्या से निपटने के कई तरीके वास्तव में उपयोगी अंतर्दृष्टि थे। धन्यवाद

— डीजे

Answer 7

जब राज्य बदलते हैं तो मुझे <select>टैग्स के सही न होने की समस्या होती है <option>। मेरी समस्या यह प्रतीत होती है कि यदि आप दो बार त्वरित उत्तराधिकार में प्रस्तुत करते हैं, पहली बार बिना किसी पूर्व-चयनित के साथ <option>लेकिन दूसरी बार एक के साथ, तो <select>टैग दूसरे रेंडर पर अपडेट नहीं करता है, लेकिन पहले डिफ़ॉल्ट पर रहता है।

मैं इस का उपयोग कर एक समाधान refs पाया । आपको अपने <select>टैग नोड (जो कुछ घटक में नेस्टेड हो सकता है) का संदर्भ प्राप्त करने की आवश्यकता है , और फिर मैन्युअल रूप से उस valueपर संपत्ति को componentDidUpdateहुक में अपडेट करें ।

componentDidUpdate(){
  let selectNode = React.findDOMNode(this.refs.selectingComponent.refs.selectTag);
  selectNode.value = this.state.someValue;
}

Answer 8

MULTISELECT / ऑप्टग्रुप के लिए एक समान उत्तर पोस्ट करना:

render() {
  return(
    <div>
      <select defaultValue="1" onChange={(e) => this.props.changeHandler(e.target.value) }>
        <option disabled="disabled" value="1" hidden="hidden">-- Select --</option>
        <optgroup label="Group 1">
          {options1}
        </optgroup>
        <optgroup label="Group 2">
          {options2}
        </optgroup>
      </select>
    </div>
  )
}

Answer 9

मेरे पास एक सरल उपाय है HTML मूल का अनुसरण करना।

<input
  type="select"
  defaultValue=""
  >
  <option value="" disabled className="text-hide">Please select</option>
  <option>value1</option>
  <option>value1</option>
</input>

.text-hide यदि आप बूटस्ट्रैप का उपयोग नहीं कर रहे हैं, तो आप यहां हैं:

.text-hide {
  font: 0/0 a;
  color: transparent;
  text-shadow: none;
  background-color: transparent;
  border: 0;
}

Answer 10

मुझे DefaultProps सेट करके एक समान समस्या मिली है:

ComponentName.defaultProps = {
  propName: ''
}

<select value="this.props.propName" ...

तो अब मैं संकलन पर त्रुटियों से बचता हूं यदि मेरा प्रचलन बढ़ते तक मौजूद नहीं है।

Comments

यह वास्तव में समस्या का समाधान नहीं है। आपको यह मिलेगा: चेतावनी: विफल प्रोप प्रकार: आपने valueएक onChangeहैंडलर के बिना एक फॉर्म फ़ील्ड के लिए एक प्रोप प्रदान किया है । यह केवल-पढ़ने के लिए फ़ील्ड प्रदान करेगा। यदि फ़ील्ड को परस्पर उपयोग किया जाना चाहिए defaultValue। अन्यथा, onChangeया तो सेट करें readOnly।

— जेसन राइस