ड्रॉप डाउन के लिए रिएक्ट जेएस का उपयोग करके ऑनकेंज इवेंट

Question

var MySelect = React.createClass({
     change: function(){
         return document.querySelector('#lang').value;
     },
     render: function(){
        return(
           <div>
               <select id="lang">
                  <option value="select" onChange={this.change}>Select</option>
                  <option value="Java" onChange={this.change}>Java</option>
                  <option value="C++" onChange={this.change}>C++</option>
               </select>
               <p></p>
               <p value={this.change}></p>
           </div>
        );
     }
});

React.render(<MySelect />, document.body);

onChangeघटना काम नहीं करता।

Answer 1

परिवर्तन की घटना <select>तत्व पर शुरू होती है, तत्व पर नहीं <option>। हालाँकि, यह एकमात्र समस्या नहीं है। जिस तरह से आपने changeफ़ंक्शन को परिभाषित किया है वह घटक के एक रेंडरर का कारण नहीं होगा। ऐसा लगता है कि आपने अभी तक रिएक्ट की अवधारणा को पूरी तरह से समझ नहीं पाया है, इसलिए हो सकता है कि "रिएक्ट में सोच" मदद करता है।

आपको चयनित मान को राज्य के रूप में संग्रहीत करना होगा और मूल्य में परिवर्तन होने पर राज्य को अपडेट करना होगा। राज्य को अपडेट करना घटक के एक रेंडर को ट्रिगर करेगा।

var MySelect = React.createClass({
     getInitialState: function() {
         return {
             value: 'select'
         }
     },
     change: function(event){
         this.setState({value: event.target.value});
     },
     render: function(){
        return(
           <div>
               <select id="lang" onChange={this.change} value={this.state.value}>
                  <option value="select">Select</option>
                  <option value="Java">Java</option>
                  <option value="C++">C++</option>
               </select>
               <p></p>
               <p>{this.state.value}</p>
           </div>
        );
     }
});

React.render(<MySelect />, document.body);

यह भी ध्यान दें कि <p>तत्वों की valueविशेषता नहीं है । प्रतिक्रिया / JSX बस अच्छी तरह से ज्ञात एचटीएमएल वाक्य रचना प्रतिकृति है, यह (के अपवाद के साथ कस्टम विशेषताओं को लागू नहीं करता है keyऔर ref)। यदि आप चाहते हैं कि चयनित मूल्य <p>तत्व की सामग्री हो, तो बस इसके अंदर रखें, जैसे आप किसी स्थिर सामग्री के साथ करेंगे।

इवेंट हैंडलिंग, स्थिति और प्रपत्र नियंत्रण के बारे में और जानें:

• http://facebook.github.io/react/docs/interactivity-and-dynamic-uis.html
• http://facebook.github.io/react/docs/forms.html

Comments

मैं आंतरिक पाठ valueके समान आंतरिक पाठ कैसे प्राप्त कर सकता हूं ?

— ब्लैंकफेस

@ZeroDarkThirty: हमेशा की तरह:event.target.textContent

— फेलिक्स क्लिंग

@FelixKling जब मैं टेक्स्ट कॉन्टेंट का उपयोग करता हूं तो यह डी सेलेक्ट टैग के अंदर सभी विकल्पों को प्रिंट करता है। केवल चयनित होने के लिए मैं क्या कर सकता हूं?

— जुआन

@ जुआन: कोशिश करो event.target.slectedOptions[0].label।

— फेलिक्स क्लिंग

Answer 2

import React, { PureComponent, Fragment } from 'react';
import ReactDOM from 'react-dom';

class Select extends PureComponent {
  state = {
    options: [
      {
        name: 'Select…',
        value: null,
      },
      {
        name: 'A',
        value: 'a',
      },
      {
        name: 'B',
        value: 'b',
      },
      {
        name: 'C',
        value: 'c',
      },
    ],
    value: '?',
  };

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

  render() {
    const { options, value } = this.state;

    return (
      <Fragment>
        <select onChange={this.handleChange} value={value}>
          {options.map(item => (
            <option key={item.value} value={item.value}>
              {item.name}
            </option>
          ))}
        </select>
        <h1>Favorite letter: {value}</h1>
      </Fragment>
    );
  }
}

ReactDOM.render(<Select />, window.document.body);

Comments

बहुत अच्छा। और आप इस तरह से परिवर्तन का परिणाम देख सकते हैं <div> <p> {this.state.value} </ p> </ div>

— मोहम्मद फ़रहानी

Answer 3

रिएक्ट हुक (16.8+):

const Dropdown = ({
  options
}) => {
  const [selectedOption, setSelectedOption] = useState(options[0].value);
  return (
      <select
        value={selectedOption}
        onChange={e => setSelectedOption(e.target.value)}>
        {options.map(o => (
          <option value={o.value}>{o.label}</option>
        ))}
      </select>
  );
};

Answer 4

धन्यवाद फेलिक्स क्लिंग, लेकिन उनके जवाब में थोड़ा बदलाव चाहिए:

var MySelect = React.createClass({
 getInitialState: function() {
     return {
         value: 'select'
     }
 },
 change: function(event){
     this.setState({value: event.target.value});
 },
 render: function(){
    return(
       <div>
           <select id="lang" onChange={this.change.bind(this)} value={this.state.value}>
              <option value="select">Select</option>
              <option value="Java">Java</option>
              <option value="C++">C++</option>
           </select>
           <p></p>
           <p>{this.state.value}</p>
       </div>
    );
 }
});
React.render(<MySelect />, document.body); 

Comments

तुम क्यों जोड़ this.change.bindरहे onChangeहो

— जूनियर उस्का

Answer 5

यदि आप अन्य घटक के रूप में इनलाइन का उपयोग कर रहे हैं, तो आप नीचे दिए गए उपयोग की तरह भी कर सकते हैं।

<select onChange={(val) => this.handlePeriodChange(val.target.value)} className="btn btn-sm btn-outline-secondary dropdown-toggle">
    <option value="TODAY">Today</option>
    <option value="THIS_WEEK" >This Week</option>
    <option value="THIS_MONTH">This Month</option>
    <option value="THIS_YEAR">This Year</option>
    <option selected value="LAST_AVAILABLE_DAY">Last Availabe NAV Day</option>
</select>

और उस घटक पर जहां चयन का उपयोग किया जाता है, फ़ंक्शन को नीचे की तरह ऑनचेंज संभालने के लिए परिभाषित करें:

handlePeriodChange(selVal) {
    this.props.handlePeriodChange(selVal);
}

Answer 6

var MySelect = React.createClass({
getInitialState: function() {
 

var MySelect = React.createClass({
 getInitialState: function() {
     return {
         value: 'select'
     }
 },
 change: function(event){
     event.persist(); //THE MAIN LINE THAT WILL SET THE VALUE
     this.setState({value: event.target.value});
 },
 render: function(){
    return(
       <div>
           <select id="lang" onChange={this.change.bind(this)} value={this.state.value}>
              <option value="select">Select</option>
              <option value="Java">Java</option>
              <option value="C++">C++</option>
           </select>
           <p></p>
           <p>{this.state.value}</p>
       </div>
    );
 }
});
React.render(<MySelect />, document.body); 

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>