জেএসএক্স প্রতিক্রিয়া: নির্বাচিত <নির্বাচন> বিকল্পে "নির্বাচিত" নির্বাচন করা

Question

একটি <select>মেনুতে একটি প্রতিক্রিয়া উপাদানগুলিতে , আমাকে selectedবিকল্পের ক্ষেত্রে অ্যাপ্লিকেশনের অবস্থা প্রতিফলিত করে এমন বৈশিষ্ট্যটি সেট করতে হবে ।

ইন render(), optionStateরাজ্যের মালিকের কাছ থেকে সোর্টমেনু উপাদানটিতে দেওয়া হয়। বিকল্প মানগুলি 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

তবে এটি জেএসএক্স সংকলনে একটি সিনট্যাক্স ত্রুটি ট্রিগার করে।

এটি করলে সিনট্যাক্স ত্রুটি থেকে মুক্তি পাওয়া যায় তবে সমস্যাটি সমাধান হয় না:

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) এর বর্তমান সংস্করণে বিকল্পগুলিতে নির্বাচিত বৈশিষ্ট্যটি সেট করা মোটেই কার্যকর হয় না। পরিবর্তে নির্বাচনের উপাদানটিতে মান বৈশিষ্ট্যটি সেট করুন।

— liammclennan

আমি এজ্যাক্সের সাথে ডেটা লোড করি de ডিফল্টভ্যালু আমার পক্ষে কাজ করে না। মান কাজ করছে তবে আমি নির্বাচিত তালিকায় অন্য আইটেমটি নির্বাচন করতে পারছি না L তালিকাগুলি খোলা হচ্ছে তবে আমি যখন তার একটি নির্বাচন করি তখন এটি মান আইটেমটি নির্বাচন করে ny কোন ধারণা?

— ব্যবহারকারী 1924375

@ user1924375 আপনার onChange ইভেন্ট ব্যবহার করা উচিত onChange={this.handleSelect}এবং আপনার উপাদানগুলির জন্য রাষ্ট্রীয় মান নির্ধারণ করা উচিত , উদাহরণস্বরূপ: 'হ্যান্ডেলসিলিট: ফাংশন () {this.setState ({মান: ইভেন্ট.তারেট.ভ্যালু});} `এটি আপনার নির্বাচিত উপাদানটি নতুন দিয়ে পুনরায় রেন্ডার করবে` নির্বাচিত আইটেম আশা করি এটি আপনাকে সহায়তা করবে।

— মজাদারডেডভিল

যদিও এটি এখনও নথিভুক্ত করা হয়নি, তবে আপনি যদি সক্ষম করে থাকেন তবে valueপ্রপসটি <select>একটি অ্যারে হতে পারে multiselect।

— tirdadc

বরং defaultValueআরম্ভ করার জন্য ব্যবহার করুন

— ১ww:১৯-

Answer 2

আপনি যখন "নির্বাচিত" সম্পত্তি সেট করার চেষ্টা করেন তখন আপনি প্রতিক্রিয়া আপনাকে যা সতর্ক করে তা করতে পারেন <option>:

চালু defaultValueবা পরিবর্তে valueপ্রপস ব্যবহার করুন ।<select>selected<option>

সুতরাং, আপনি আপনার নির্বাচনের options.valueউপর ব্যবহার করতে পারেনdefaultValue

Comments

আমি যদি বর্তমানে নির্বাচিত বিকল্পটি এখনও নির্দেশ করতে চাই, তবে আমি কীভাবে এটি করব? আমি বর্তমানে কেবলমাত্র বিকল্পটি নির্বাচিত রাখতে সক্ষম হয়েছি (এবং ভবিষ্যতের পোস্টিংয়ের জন্য ফর্মের স্থিতি বজায় রাখি) সেটি হল = সত্য সেট করে। আমি নির্বাচিত উপাদানগুলির ডিফল্টভ্যালু এবং মান প্রপস সেট করার চেষ্টা করেছি, তবে এটি বিকল্প মেনুতে নির্বাচিত সঠিক বিকল্পটি সেট করে দৃশ্যে রেন্ডার হয় না। কোন পরামর্শ?

— পাইড পাইপ 21

উদাহরণ হতে পারে ??

— shinzou

আমার জন্য কাজ করছে না: <ক্লাসের নাম নির্বাচন করুন = "ফর্ম-নিয়ন্ত্রণ" মান = "

— মোইস

ডিফল্টভ্যালু নতুন সংস্করণ দিয়ে কাজ করে না

— হোস বুধ

Answer 3

এখানে একটি সম্পূর্ণ সমাধান রয়েছে যা সেরা উত্তর এবং এর নীচে দেওয়া মন্তব্যগুলি অন্তর্ভুক্ত করে (যা কাউকে লড়াই করতে সহায়তা করতে পারে এটি সমস্তকে একত্রিত করতে):

ES6 (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>
)

পূর্ববর্তী উত্তর (বাইন্ড ব্যবহার করে):

প্রধান উপাদান:

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

@ তালসিবিনি - এটি প্রকৃতপক্ষে স্প্রেড অপারেটর, তবে আমার স্যাম্পল কোডটিতে এর অর্থ এখানে অন্য কিছু কোড sertোকানো !

— অ্যান্ডি লরেঞ্জ

@ অ্যান্ডি লোরেঞ্জ তাই সেক্ষেত্রে আমি এটিকে অপসারণের জন্য সুপারিশ করব ... :), অথবা কেবল // আপনার কোডের বাকী অংশের মতো মন্তব্য লিখুন

— তালসিবিনি

Answer 4

এটি কীভাবে করা যায় তার সর্বশেষ উদাহরণ এখানে। থেকে ডক্স প্রতিক্রিয়া , প্লাস স্বয়ংক্রিয় বাঁধাই "চর্বি-ARROW" পদ্ধতি সিনট্যাক্স।

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

যদিও কোনও ব্যাখ্যা দেওয়া হয়নি, এর সত্যই প্রয়োজন হয়নি। একই সমস্যার কাছে যাওয়ার একাধিক উপায় সত্যই সহায়ক অন্তর্দৃষ্টি ছিল। ধন্যবাদ

— ডিজে 2

Answer 7

রাষ্ট্র পরিবর্তন <select>হওয়ার সাথে সাথে ট্যাগগুলি সঠিকভাবে আপডেট না করা নিয়ে আমার একটি সমস্যা ছিল <option>। আমার সমস্যাটি মনে হয়েছিল যে আপনি যদি দ্রুত উত্তেজনায় দু'বার রেন্ডার করেন, প্রথমবার কোনও প্রাক-নির্বাচিত না হয়ে <option>তবে দ্বিতীয়বারের সাথে একটি করে, তবে <select>ট্যাগটি দ্বিতীয় রেন্ডারে আপডেট হয় না, তবে প্রথমে ডিফল্ট থাকে।

রেফ ব্যবহার করে এর সমাধান পেয়েছি । আপনাকে আপনার <select>ট্যাগ নোডের রেফারেন্স নিতে হবে (যা কোনও অংশে বাসা বাঁধতে পারে), এবং তারপরে হুচে নিজেই এতে valueসম্পত্তি আপডেট করতে হবে componentDidUpdate।

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

Answer 8

মাল্টিটিক্স / অপ্টগ্রুপগুলির জন্য অনুরূপ উত্তর পোস্ট করা:

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

আমি ডিফল্টপ্রপুট সেট করে একই ধরণের সমস্যা পেয়েছিলাম:

ComponentName.defaultProps = {
  propName: ''
}

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

সুতরাং এখন আমি সংকলনের ত্রুটিগুলি এড়াচ্ছি যদি আমার প্রপ মাউন্টিং অবধি উপস্থিত না থাকে।

Comments

আসলেই সমস্যাটি সমাধান হচ্ছে না। আপনি এটি পাবেন: সতর্কতা: ব্যর্থ প্রপ প্রকার: আপনি valueকোনও onChangeহ্যান্ডলার ছাড়াই কোনও ফর্মের ক্ষেত্রে একটি প্রপ সরবরাহ করেছেন । এটি কেবল পঠনযোগ্য ক্ষেত্র রেন্ডার করবে। ক্ষেত্রটি পরিবর্তনযোগ্য ব্যবহার হওয়া উচিত defaultValue। অন্যথায়, হয় সেট করুন onChangeবা readOnly।

— জেসন রাইস