我正在制作一个带有单选按钮的简单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 属性name="ContactMode"..原因是我每行都有单独的保存按钮，点击该保存按钮时，特定行将被保存..每行应该有name="ContactMode"..
编辑：
由于我的问题不清楚我要实现的目标，因此我将在此处提供整个代码。
->我有一个 stepper 表单，其中第 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 步以查看问题。要查看第二项，请单击展开按钮。
请帮助我在每一行中设置默认单选按钮值。