প্রতিক্রিয়া-নির্বাচনের ক্ষেত্রে কীভাবে একটি ডিফল্ট মান সেট করা যায়

Question 1

প্রতিক্রিয়া-নির্বাচন ব্যবহার করে আমার একটি সমস্যা আছে। আমি রিডেক্স ফর্মটি ব্যবহার করি এবং আমি আমার রিঅ্যাক্ট-সিলেক্ট উপাদানটি রিডুএক্স ফর্মের সাথে সামঞ্জস্যপূর্ণ করেছি। কোডটি এখানে:

const MySelect = props => (
    <Select
        {...props}
        value={props.input.value}
        onChange={value => props.input.onChange(value)}
        onBlur={() => props.input.onBlur(props.input.value)}
        options={props.options}
        placeholder={props.placeholder}
        selectedValue={props.selectedValue}
    />
);

এবং আমি এখানে এটি কীভাবে রেন্ডার করব:

<div className="select-box__container">
    <Field
    id="side"
    name="side"
    component={SelectInput}
    options={sideOptions}
    clearable={false}
    placeholder="Select Side"
    selectedValue={label: 'Any', value: 'Any'}
    />
</div>

তবে সমস্যাটি হ'ল আমার ড্রপডাউনটির আমার ইচ্ছামত একটি ডিফল্ট মান নেই। আমি কি ভুল করছি? কোন ধারনা?

Question 2

আমার ধারণা আপনার এইরকম কিছু দরকার:

const MySelect = props => (
<Select
    {...props}
    value={props.options.filter(option => option.label === 'Some label')}
    onChange={value => props.input.onChange(value)}
    onBlur={() => props.input.onBlur(props.input.value)}
    options={props.options}
    placeholder={props.placeholder}
  />
);

Question 3

আমি ডিফল্টভ্যালিউ প্যারামিটারটি ব্যবহার করেছি, নীচে কোডটি কীভাবে আমি একটি ডিফল্ট মান অর্জন করেছি এবং যখন কোনও বিকল্প ড্রপ-ডাউন থেকে নির্বাচন করা হয় তখন ডিফল্ট মান আপডেট করে update

<Select
  name="form-dept-select"
  options={depts}
  defaultValue={{ label: "Select Dept", value: 0 }}
  onChange={e => {
              this.setState({
              department: e.label,
              deptId: e.value
              });
           }}
/>

Question 4

আপনি এখানে আসতে থাকেন তাহলে প্রতিক্রিয়া-নির্বাচন v2, এবং তবুও আপনার সমস্যা - সংস্করণ 2 এখন শুধুমাত্র একটি অবজেক্ট হিসেবে গ্রহণ করে value, defaultValueইত্যাদি

এটি হ'ল ন্যায়বিচারের value={{value: 'one', label: 'One'}}পরিবর্তে ব্যবহার করার চেষ্টা করুন value={'one'}।

Question 5

আমারও তেমন ত্রুটি হয়েছিল। আপনার বিকল্পগুলির একটি মান বৈশিষ্ট্য রয়েছে তা নিশ্চিত করুন।

<option key={index} value={item}> {item} </option>

তারপরে প্রাথমিকভাবে নির্বাচিত উপাদান মানের সাথে বিকল্পগুলির মানটি মিলান match

<select 
    value={this.value} />

Question 6

@ Isaac-pak এর উত্তরে প্রসারিত করা, আপনি যদি কোনও প্রোপটিতে আপনার উপাদানটিতে ডিফল্ট মানটি প্রেরণ করতে চান, আপনি ডিফল্টটি প্রথমবার নির্বাচিত হয়েছে কিনা তা নিশ্চিত করার জন্য আপনি উপাদানটি ডিডমাউন্ট () লাইফসাইকেল পদ্ধতিতে এটি সংরক্ষণ করতে পারেন।

দ্রষ্টব্য, আমি নীচের কোডটিকে আরও সম্পূর্ণ তৈরি করতে এবং মন্তব্য অনুযায়ী প্রাথমিক মান হিসাবে একটি খালি স্ট্রিং ব্যবহার করার জন্য আপডেট করেছি।

export default class MySelect extends Component {

    constructor(props) {
        super(props);
        this.state = {
            selectedValue: '',
        };
        this.handleChange = this.handleChange.bind(this);

        this.options = [
            {value: 'foo', label: 'Foo'},
            {value: 'bar', label: 'Bar'},
            {value: 'baz', label: 'Baz'}
        ];

    }

    componentDidMount() {
        this.setState({
            selectedValue: this.props.defaultValue,
        })
    }

    handleChange(selectedOption) {
        this.setState({selectedValue: selectedOption.target.value});
    }

    render() {
        return (
            <Select
                value={this.options.filter(({value}) => value === this.state.selectedValue)}
                onChange={this.handleChange}
                options={this.options}
            />
        )
    }
}

MySelect.propTypes = {
    defaultValue: PropTypes.string.isRequired
};

Question 7

ডিফল্ট ইনপুটভ্যালু প্রপসগুলি এর মতো ব্যবহার করুন:

<Select
   name="name"
   isClearable
   onChange={handleChanges}
   options={colourOptions}
   isSearchable="true"
   placeholder="Brand Name"
   defaultInputValue="defaultInputValue"
/>

আরও রেফারেন্সের জন্য https://www.npmjs.com/package/react-select

Question 8

আমি কেবল এটি নিজেই পেরেছি এবং হ্রাসকারী আইএনআইটি ফাংশনে ডিফল্ট মান সেট করতে বেছে নিয়েছি।

আপনি যদি সিডিকে রেডেক্সের সাথে বেঁধে রাখেন তবে সেরা ডিফল্ট মান নির্বাচন না করে এটি 'ডি-বাইন্ড' না করে প্রকৃত মানকে উপস্থাপন করে না, পরিবর্তে যখন আপনি বস্তুর সূচনা করবেন তখন মানটি সেট করুন।

Question 9

আপনি যদি রিডেক্স-ফর্ম ব্যবহার করছেন না এবং আপনি পরিবর্তনের জন্য স্থানীয় রাষ্ট্র ব্যবহার করছেন তবে আপনার প্রতিক্রিয়া-বাছাই উপাদানটি দেখতে এইরকম হতে পারে:

class MySelect extends Component {

constructor() {
    super()
}

state = {
     selectedValue: 'default' // your default value goes here
}

render() {
  <Select
       ...
       value={this.state.selectedValue}
       ...
  />
)}

Question 10

আপনি বিকল্পগুলিতে গোষ্ঠীগুলি ব্যবহার করেন তবে আপনাকে গভীর অনুসন্ধান করতে হবে:

options={[
  { value: 'all', label: 'All' },
  {
    label: 'Specific',
    options: [
      { value: 'one', label: 'One' },
      { value: 'two', label: 'Two' },
      { value: 'three', label: 'Three' },
    ],
  },
]}

const deepSearch = (options, value, tempObj = {}) => {
  if (options && value != null) {
    options.find((node) => {
      if (node.value === value) {
        tempObj.found = node;
        return node;
      }
      return deepSearch(node.options, value, tempObj);
    });
    if (tempObj.found) {
      return tempObj.found;
    }
  }
  return undefined;
};

Question 11

আপনার বিকল্পগুলি যদি এটির মতো হয়

var options = [
  { value: 'one', label: 'One' },
  { value: 'two', label: 'Two' }
];

আপনার {props.input.value}নিজের 'value'মধ্যে একটির সাথে মেলে{props.options}

অর্থ, props.input.valueহয় 'one'বা হওয়া উচিত'two'

Question 12

নির্বাচনের মানটি স্বয়ংক্রিয়ভাবে নির্বাচন করতে।

<div className="form-group">
    <label htmlFor="contactmethod">Contact Method</label>
    <select id="contactmethod" className="form-control"  value={this.state.contactmethod || ''} onChange={this.handleChange} name="contactmethod">
    <option value='Email'>URL</option>
    <option value='Phone'>Phone</option>
    <option value="SMS">SMS</option>
    </select>
</div>

নির্বাচন করা ট্যাগটিতে মান বৈশিষ্ট্যটি ব্যবহার করুন

value={this.state.contactmethod || ''}

সমাধান আমার জন্য কাজ করছে।

Question 13

কনস্ট্রাক্টরে ডিফল্ট বিকল্প পাঠ্যের জন্য একটি রাষ্ট্র সম্পত্তি তৈরি করুন
- ডিফল্ট বিকল্প মান সম্পর্কে চিন্তা করবেন না
রেন্ডার ফাংশনে একটি বিকল্প ট্যাগ যুক্ত করুন। শুধুমাত্র রাষ্ট্র এবং ত্রৈমাসিক অভিব্যক্তি ব্যবহার করে দেখান
কোনও বিকল্প নির্বাচন করা হলে হ্যান্ডেল করার জন্য একটি ফাংশন তৈরি করুন

এই ইভেন্টের হ্যান্ডলার ফাংশনে ডিফল্ট বিকল্প মানের স্থিতি বাতিল করে দিন

Class MySelect extends React.Component
{
    constructor()
    {
        super()
        this.handleChange = this.handleChange.bind(this);
        this.state = {
            selectDefault: "Select An Option"
        }
    }
    handleChange(event)
    {
        const selectedValue = event.target.value;
        //do something with selectedValue
        this.setState({
            selectDefault: null
        });
    }
    render()
    {
        return (
        <select name="selectInput" id="selectInput" onChange={this.handleChange} value= 
            {this.selectedValue}>
         {this.state.selectDefault ? <option>{this.state.selectDefault}</option> : ''}
            {'map list or static list of options here'}
        </select>
        )
    }
}

Question 14

আমি ঘন ঘন এরকম কিছু ব্যবহার করছি।

এই উদাহরণে প্রপস থেকে ডিফল্ট মান

if(Defaultvalue ===item.value) {
    return <option key={item.key} defaultValue value={item.value}>{plantel.value} </option>   
} else {
    return <option key={item.key} value={item.value}>{plantel.value} </option> 
}