प्रतिक्रिया-चयन में डिफ़ॉल्ट मान कैसे सेट करें

Question 1

मेरे पास प्रतिक्रिया-चयन का उपयोग करके एक मुद्दा है। मैं redux फॉर्म का उपयोग करता हूं और मैंने अपनी प्रतिक्रिया-चयन घटक को redux फॉर्म के साथ संगत कर दिया है। यहाँ कोड है:

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

मैंने defaultValue पैरामीटर का उपयोग किया, नीचे एक कोड है कि कैसे मैंने एक डिफ़ॉल्ट मान हासिल किया और साथ ही ड्रॉप-डाउन से एक विकल्प चुने जाने पर डिफ़ॉल्ट मान को अपडेट किया।

<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

आप यहाँ आए हैं प्रतिक्रिया का चयन वी 2, और अभी भी समस्या आ - संस्करण 2 अब केवल एक वस्तु के रूप में स्वीकार करता value, defaultValueआदि

यही है, value={{value: 'one', label: 'One'}}बस के बजाय, का उपयोग करने का प्रयास करें value={'one'}।

Question 5

मुझे एक समान त्रुटि हो रही थी। सुनिश्चित करें कि आपके विकल्पों में एक मूल्य विशेषता है।

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

फिर विकल्प मूल्य के लिए शुरू में चयन तत्व मूल्य से मेल खाता है।

<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

मैं बस खुद इस माध्यम से गया और reducer INIT फ़ंक्शन में डिफ़ॉल्ट मान सेट करने के लिए चुना।

यदि आप अपने चयन को redux से बाँधते हैं, तो इसे सर्वश्रेष्ठ डिफ़ॉल्ट मान के साथ 'de-bind' न करें, जो वास्तविक मान का प्रतिनिधित्व नहीं करता है, इसके बजाय जब आप ऑब्जेक्ट को इनिशियलाइज़ करते हैं तो मान सेट करें।

Question 8

यदि आप redux-form का उपयोग नहीं कर रहे हैं और आप परिवर्तनों के लिए स्थानीय स्थिति का उपयोग कर रहे हैं, तो आपका प्रतिक्रिया-चयन घटक इस तरह दिख सकता है:

class MySelect extends Component {

constructor() {
    super()
}

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

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

Question 9

DefaultInputValue प्रॉप्स का उपयोग करें जैसे:

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

अधिक संदर्भ के लिए https://www.npmjs.com/package/react-select

Question 10

अगर आपके विकल्प ऐसे हैं

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

आपका {props.input.value}में से एक से मेल खाना चाहिए 'value'में अपने{props.options}

मतलब, या props.input.valueतो होना चाहिए 'one'या'two'

Question 11

सेलेक्ट की वैल्यू को ऑटो सेलेक्ट करें।

<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 12

कंस्ट्रक्टर में डिफ़ॉल्ट विकल्प पाठ के लिए एक राज्य संपत्ति बनाएँ
- डिफ़ॉल्ट विकल्प मान के बारे में चिंता न करें
रेंडर फंक्शन में ऑप्शन टैग जोड़ें। केवल राज्य और टर्नरी अभिव्यक्ति का उपयोग करके दिखाएं
जब कोई विकल्प चुना गया था, तो उसे संभालने के लिए एक फंक्शन बनाएं

इस ईवेंट हैंडलर फ़ंक्शन को डिफ़ॉल्ट विकल्प मान की स्थिति को शून्य में बदलें

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 13

मैं अक्सर कुछ इस तरह का उपयोग कर रहा हूँ।

इस उदाहरण में प्रॉप्स से डिफ़ॉल्ट मान

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> 
}

Question 14

यदि आप विकल्पों में समूहों का उपयोग करते हैं, तो आपको गहरी खोज करने की आवश्यकता है:

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;
};