प्रतिक्रिया में रेडियो बटन मान सेट करें

Question

मैं फॉर्म के साथ एक साधारण प्रतिक्रिया ऐप बना रहा हूं जिसमें रेडियो बटन हैं।

यहां एक डिफ़ॉल्ट डेटा उपलब्ध है, जैसे,

const defaultData = [{ ContactMode: 3 }, { ContactMode: 2 }, { ContactMode: 2 }];

आवश्यकता:

-> इसे टाइप करने की जरूरत है defaultDataऔर ContactModeप्रत्येक पंक्ति में जाँच के अनुसार अपने संबंधित मोड को असाइन करें ।

कार्य स्निपेट:

const { useState } = React;

const App = () => {
  const [formValue, setFormValue] = useState({
    ContactMode: 1
  });

  const defaultData = [{ ContactMode: 3 }, { ContactMode: 2 }, { ContactMode: 2 }];

  const handleInputChange = (e, index) => {
    const { name, value } = event.target;
    setFormValue({
      ...formValue,
      [name]: value
    });
  };

  const submitData = () => {
    console.log(formValue);
  };

  return (
    <div>
      <form>
        {defaultData.map((item, index) => {
          return (<React.Fragment>
            <label> Contact Mode </label>
            <input
              type="radio"
              name="ContactMode"
              checked={item.ContactMode == 1}
              value={1}
              onChange={(event) => handleInputChange(index, event)}
            />{" "}
            Email
            <input
              type="radio"
              name="ContactMode"
              checked={item.ContactMode == 2}
              value={2}
              onChange={(event) => handleInputChange(index, event)}
            />{" "}
            Text
            <input
              type="radio"
              name="ContactMode"
              checked={item.ContactMode == 3}
              value={3}
              onChange={(event) => handleInputChange(index, event)}
            />{" "}
            Both
            <br />
            <br />
            <button type="button">
               Save
             </button>
            <br />
            <br />
            <br />
          </React.Fragment>);
        })}
      </form>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.11.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>

अपेक्षित उत्पादन:

Contact Mode  Email Text Both (Checked)

Contact Mode  Email Text(Checked) Both

Contact Mode  Email Text(Checked) Both

नोट: मैं नाम विशेषता को संशोधित नहीं कर सकता name="ContactMode".. कारण यह है कि मेरे पास प्रत्येक पंक्ति में अलग-अलग सेव बटन भी है और उस सेव बटन पर क्लिक करने पर जो विशेष पंक्ति बच जाएगी .. और प्रत्येक पंक्ति में होनी चाहिए name="ContactMode"..

संपादित करें:

जैसा कि मेरा प्रश्न स्पष्ट नहीं है कि मैं क्या हासिल करने की कोशिश कर रहा हूं, मैं यहां पूरा कोड देने जा रहा हूं।

-> मेरे पास एक स्टेपर फॉर्म है जिसमें चरण 2 रोजगार अनुभाग है और डिफ़ॉल्ट रूप से मेरे पास फॉर्म में सेट करने के लिए मान हैं,

const dynamicData = [
  {
    EmploymentID: 1,
    companyName: 'Company One',
    designation: 'Designation One',
    ContactMode: 3,
  },
  {
    EmploymentID: 2,
    companyName: 'Company two',
    designation: 'Designation One',
    ContactMode: 2,
  },
];

->useEffect हुक के अंदर मैंने फॉर्म वैल्यू सेट की तरह,

  React.useEffect(() => {
    setExpanded(0);
    setValue((prev) => {
      const companyDetails = [...dynamicData];
      return { ...prev, companyDetails };
    });
  }, []);

यहां इनपुट बॉक्स के साथ फॉर्म वैल्यू ठीक से बांधे गए हैं, लेकिन रेडियो बटन का मूल्य चेक नहीं किया गया है।

-> दो डेटा उपलब्ध हैं लेकिन पहले वाले को डिफ़ॉल्ट रूप से विस्तारित किया जाएगा और जबकि दूसरा Expandवाला पहले वाले बटन के नीचे क्लिक करने पर खुल जाएगा ।

->save बटन पर क्लिक करने पर , उस विशेष ऑब्जेक्ट ( inputField) को संशोधित डेटा के साथ कंसोल लॉग (केवल परीक्षण) किया जाएगा।

यहाँ ISSUE है अगर हम डेटा को संशोधित करते हैं तो चीजें ठीक काम कर रही हैं लेकिन रेडियो चेक की गई विशेषता अकेले आइटम को चेक नहीं कर रही है .. (चेक इंडिकेशन काम नहीं कर रहा है) ।।

समस्या देखने के लिए कृपया नीचे दिए गए कोडैंडबॉक्स में चरण 2 पर जाएं .. दूसरा आइटम देखने के लिए, विस्तार बटन पर क्लिक करें ..

कृपया मुझे प्रत्येक पंक्ति में डिफ़ॉल्ट रेडियो बटन मान सेट करने में मदद करें।

Answer 1

आपके सैंडबॉक्स में मैं काम करने के लिए रेडियो बटन प्राप्त करने में सक्षम था

1. nameप्रत्येक मैप किए गए रेडियो समूह के लिए एक अद्वितीय प्रदान करना
2. ContactModeसंपत्ति को विशिष्ट रूप से संभालने के लिए परिवर्तन हैंडलर को अपडेट करें ।

सभी मैप किए गए समूहों के बीच अद्वितीय बनाने के लिए वर्तमान मैप किए गए अनुक्रमणिका का उपयोग करने के लिए रेडियो समूहों को अपडेट करें।

<div className="form-group col-sm-4">
  <label className="inline-flex items-center mr-6">
    <input
      type="radio"
      className="form-radio border-black"
      name={`ContactMode-${index}`} // <-- append index to name value={1} checked={inputField.ContactMode === 1} // <-- use strict "===" onChange={(event) => handleInputChange(index, event)} /> <span className="ml-2">Email</span> </label> </div> <div className="form-group col-sm-4"> <label className="inline-flex items-center mr-6"> <input type="radio" className="form-radio border-black" name={`ContactMode-${index}`}
      value={2}
      checked={inputField.ContactMode === 2}
      onChange={(event) => handleInputChange(index, event)}
    />
    <span className="ml-2">Text</span>
  </label>
</div>
<div className="form-group col-sm-4">
  <label className="inline-flex items-center mr-6">
    <input
      type="radio"
      className="form-radio border-black"
      name={`ContactMode-${index}`}
      value={3}
      checked={inputField.ContactMode === 3}
      onChange={(event) => handleInputChange(index, event)}
    />
    <span className="ml-2">Both</span>
  </label>
</div>

विशेष रूप handleInputChangeसे संभालने के लिए एक मामला जोड़ें ContactMode।

const handleInputChange = (index, event) => {
  const { name, value } = event.target;
  if (name === 'designation' && !isLettersOnly(value)) {
    return;
  }

  if (name.startsWith('ContactMode')) { // <-- check name prefix
    setValue((prev) => ({
      ...prev,
      companyDetails: prev.companyDetails.map((detail, i) =>
        i === index
          ? {
              ...detail,
              ContactMode: Number(value), // <-- store back under correct key, as number for string equality check
            }
          : detail,
      ),
    }));
    return; // <-- return early so other state update is skipped!
  }

  setValue((prev) => {
    const companyDetails = prev.companyDetails.map((v, i) => {
      if (i !== index) {
        return v;
      }

      return { ...v, [name]: value };
    });

    return { ...prev, companyDetails };
  });
};

Answer 2

मुझे लगता है कि इसके कारण सभी रेडियो का एक ही नाम विशेषता है, हर समूह का अलग नाम होना चाहिए। उदाहरण के लिए:

name = " ex1"
name = "ex2"
name = "ex3"

हर नए समूह के लिए इस तरह से नाम के कारण। यदि आप एक ही नाम करते हैं तो यह सब कुछ गड़बड़ कर देता है और आपको लगता है कि आप के ==बजाय===

item.ContactMode == 3

इसका उपयोग करना बेहतर है ===

Answer 3

@ TalOrlanczyk का जवाब सही है। आप कुल 9 रेडियो बटन प्रिंट कर रहे हैं और सभी का नाम विशेषता में समान मूल्य है। तो तकनीकी रूप से यह 9 रेडियो बटन वाले रेडियो समूह के समान है, जिसका अर्थ है कि एक रेडियो समूह केवल एक मान स्वीकार कर सकता है। मैंने आपका कोड चलाया और इसने केवल 3 पंक्ति पर "पाठ" चुना।

यदि आप 3 अलग-अलग पंक्तियों (रेडियो समूहों) की कोशिश कर रहे हैं, तो आपको कुछ इस तरह की कोशिश करनी होगी:

<input
    type="radio"
    name={"ContactMode"+index}
    checked={item.ContactMode == 1}
    value={1}
    onChange={(event) => handleInputChange(index, event)}
/>{" "}
Email
<input
    type="radio"
    name={"ContactMode"+index}
    checked={item.ContactMode == 2}
    value={2}
    onChange={(event) => handleInputChange(index, event)}
/>{" "}
Text
<input
    type="radio"
    name={"ContactMode"+index}
    checked={item.ContactMode == 3}
    value={3}
    onChange={(event) => handleInputChange(index, event)}
/>{" "}

यह कोशिश करो और अपने कोड फिर से चलाएँ

Answer 4

यहां आपके कोड में कुछ समस्याएं हैं ...

1. हर बार जब घटक वापस आता है, तो .mapउसे बुलाया जाता है defaultData। इसलिए राज्य के लिए मैप नहीं किया गया।

2. यदि आप प्रत्येक पुनरावृत्ति के लिए एक ही नाम चाहते हैं, तो आपको प्रत्येक पुनरावृत्ति के लिए उपयोग करने की आवश्यकता है <form>अन्यथा सभी रेडियो बटन एक साथ समूहीकृत किए जाएंगे, इसलिए केवल अंतिम रेडियो बटन के रूप में चिह्नित किया गया है।

3. इसके ===बजाय उपयोग करना बेहतर है==

मैंने आपका कोड संशोधित कर दिया है और defaultDataइसका उपयोग राज्य को इनिशियलाइज़ करने के लिए किया जाता है।

const { useState } = React;


  const defaultData = [{ ContactMode: 3 }, { ContactMode: 2 }, { ContactMode: 2 }];

const App = () => {

  const [formValue, setFormValue] = useState([...defaultData]);

  const handleInputChange = (index, e) => {
    const { name, value } = e.target;

    const newFormValue = [...formValue];
    newFormValue.splice(index,1,{[name]: value});
    
    setFormValue(newFormValue);
  };

  const submitData = () => {
    console.log(formValue);
  };

  return (
    <div>
        {formValue.map((item, index) => {
          return (<form>
            <label> Contact Mode </label>
            <input
              type="radio"
              name="ContactMode"
              checked={Number(item.ContactMode) === 1}
              value={1}
              onChange={(event) => handleInputChange(index, event)}
            />{" "}
            Email
            <input
              type="radio"
              name="ContactMode"
              checked={Number(item.ContactMode) === 2}
              value={2}
              onChange={(event) => handleInputChange(index, event)}
            />{" "}
            Text
            <input
              type="radio"
              name="ContactMode"
              checked={Number(item.ContactMode) === 3}
              value={3}
              onChange={(event) => handleInputChange(index, event)}
            />{" "}
            Both
            <br />
            <br />
          </form>);
        })}
        <button type="button" onClick={submitData}>
          {" "}
          Submit{" "}
        </button>
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.11.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.11.0/umd/react-dom.production.min.js"></script>
<div id="root"></div>