ড্রপ ডাউনের জন্য প্রতিক্রিয়া জেএস ব্যবহার করে অন চেঞ্জ ইভেন্ট

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বৈশিষ্ট্য নেই। প্রতিক্রিয়া / জেএসএক্স কেবল সুপরিচিত এইচটিএমএল সিনট্যাক্সের প্রতিলিপি তৈরি করে, এটি কাস্টম বৈশিষ্ট্যগুলি প্রবর্তন করে না ( keyএবং ব্যতীত ref)। আপনি যদি নির্বাচিত মানটিকে <p>উপাদানটির বিষয়বস্তু হিসাবে রাখতে চান তবে কেবল এটির ভিতরে রাখুন, যেমন আপনি কোনও স্থিতিশীল সামগ্রী দিয়ে থাকেন।

ইভেন্ট হ্যান্ডলিং, রাষ্ট্র এবং ফর্ম নিয়ন্ত্রণ সম্পর্কে আরও জানুন:

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

Comments

ভিতরের পাঠ্যটির valueসমান না হয়ে আমি কীভাবে অভ্যন্তরীণ পাঠ্য পেতে পারি ?

— ফাঁকাফেস

@ জিরো ডার্ক থার্টি: যথারীতি:event.target.textContent

— ফেলিক্স ক্লিং

@ ফেলিক্সক্লিং যখন আমি টেক্সট কনটেন্টটি ব্যবহার করি এটি ডি সিলেক্ট ট্যাগের ভিতরে সমস্ত অপশন মুদ্রণ করে। আমি কেবল নির্বাচিত পেতে কী করতে পারি?

— জুয়ান

@ জুয়ান: চেষ্টা করুন 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>