मैं एक प्रपत्र पर isMulti विशेषता के साथ प्रतिक्रिया-चयन का उपयोग कर रहा हूँ। सादगी के लिए डेटा निम्नलिखित हैं

const options = [
  { value: 'chocolate', label: 'Chocolate' },
  { value: 'strawberry', label: 'Strawberry' },
  { value: 'vanilla', label: 'Vanilla' }
]

अगर मैं पहले दो विकल्पों का चयन करता हूं और फिर मैं फॉर्म जमा करता हूं, तो प्रतिक्रिया-चयन फ़ील्ड में निम्न मान होगा:

reactSelectField: [
   { value: 'chocolate', label: 'Chocolate' },
   { value: 'strawberry', label: 'Strawberry' }
]

मैं फ़ील्ड वैल्यू को कैसे सेट कर सकता हूं?

reactSelectField: ['chocolate', 'strawberry']

जो वास्तव में विकल्पों का मान है न कि संपूर्ण वस्तु?

0
user3009752 14 मार्च 2021, 17:12

1 उत्तर

सबसे बढ़िया उत्तर

आप चेंज और फॉर्म स्टेट का उपयोग करके मूल्यों को स्वयं बदल सकते हैं

const [values, setValues] = React.useState([]);

<Select 
  options={options}
  value={values.map((value) => ({ 
    label: value, 
    value,
  })}
  onChange={(values) => { 
    setValues(values.map((option) => option.value));
  }}
/>

या अपनी अपेक्षानुसार मान वापस करने के लिए अपना स्वयं का आवरण बनाएं

const MyMultiSelect = ({ values = [], options = [], onChange, ...props }) => (
  <Select 
    {...props} 
    value={values.map((value) => ({ 
      label: value, 
      value,
    })}
    options={options.map((value) => ({
      label: value,
      value,
    })}
    onChange={(values) => { 
      onChange(values.map((option) => option.value));
    }}
  />
)

// Usage
<MyMultiSelect
  options={["chocolate", "strawberry", "banana"]}
  values={["chocolate", "banana"]}
  onChange={(values) => {
    console.log(values); // ["chocolate", "banana"]
  }}
/>
0
adesurirey 14 मार्च 2021, 17:46
मुझे उन मूल्यों की संपत्ति भी पास करनी चाहिए जो मुझे लगता है
 – 
user3009752
14 मार्च 2021, 17:33
हां, विकल्पों के लिए भी, मैंने इसे अपने उत्तर में जोड़ा है
 – 
adesurirey
14 मार्च 2021, 17:40