javascript - 在 React 中设置单选按钮值

问题描述

我正在制作一个带有单选按钮的简单反应应用程序。

这里有一个可用的默认数据，例如，

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) 将与修改后的数据一起记录在控制台中（仅用于测试）。

这里的问题是，如果我们修改数据，那么一切正常，但单单无线电检查属性没有使项目检查..（检查指示不起作用）..

请转到下面给出的代码框中的第 2 步以查看问题。要查看第二项，请单击展开按钮。

请帮助我在每一行中设置默认单选按钮值。

标签： javascripthtmlreactjsradio-button

javascript - 在 React 中设置单选按钮值

问题描述

解决方案

推荐阅读