Javascript 在React中设置单选按钮值

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

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

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

要求：

->需要迭代此

defaultData

，并将其各自的

ContactMode

模式分配为每行中选中的模式

工作片段：

const{useState}=React；
常量应用=（）=>{
常量[formValue，setFormValue]=useState({
联系方式：1
});
const defaultData=[{ContactMode:3}，{ContactMode:2}，{ContactMode:2}]；
常量handleInputChange=（e，索引）=>{
常量{name，value}=event.target；
setFormValue({
…形成价值，
[名称]：值
});
};
常量提交数据=（）=>{
console.log（formValue）；
};
返回(
{defaultData.map（（项，索引）=>{
返回(
接触方式
handleInputChange（索引、事件）}
/>{" "}
电子邮件
handleInputChange（索引、事件）}
/>{" "}
正文
handleInputChange（索引、事件）}
/>{" "}
二者都




拯救






);
})}
);
};
render（，document.getElementById（“根”））
我认为这是因为所有收音机都具有相同的名称属性
每个组应该有不同的名称。
例如：

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

对于每一个像这样的新组到期名称。
如果你用同一个名字，一切都会搞砸
另一个人认为你是
==
而不是
==

item.ContactMode == 3

最好使用
=
@TalOrlanczyk的答案是正确的。您总共打印了9个单选按钮，并且所有按钮在“名称”属性中都具有相同的值。所以从技术上讲，这就像一个有9个单选按钮的单选组，这意味着一个单选组只能接受一个值。
item.ContactMode == 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)}
/>{" "}

handleInputChange（索引、事件）}
/>{" "}
电子邮件
handleInputChange（索引、事件）}
/>{" "}
正文
handleInputChange（索引、事件）}
/>{" "}

请尝试并重新运行代码
以下是代码中的一些问题

每次组件返回时，都会在
defaultData
上调用
.map
。因此未映射到状态


如果希望每个迭代使用相同的名称，则需要对每个迭代使用
，否则所有单选按钮都将分组在一起，因此只有最后一个单选按钮显示为标记


最好使用
==
而不是
=


我已修改了您的代码，并使用
defaultData
初始化状态


const{useState}=React；
const defaultData=[{ContactMode:3}，{ContactMode:2}，{ContactMode:2}]；
常量应用=（）=>{
常量[formValue，setFormValue]=useState（[…defaultData]）；
常量handleInputChange=（索引，e）=>{
常量{name，value}=e.target；
const newFormValue=[…formValue]；
拼接（索引，1，{[name]：value}）；
setFormValue（newFormValue）；
};
常量提交数据=（）=>{
console.log（formValue）；
};
返回(
{formValue.map（（项，索引）=>{
返回(
接触方式
handleInputChange（索引、事件）}
/>{" "}
电子邮件
handleInputChange（索引、事件）}
/>{" "}
正文
handleInputChange（索引、事件）}
/>{" "}
二者都




);
})}
{" "}
提交{“}
);
};
render（，document.getElementById（“根”））
在您的沙箱中，我可以让单选按钮工作

为每个映射的无线电组提供唯一的
名称
更新更改处理程序以唯一地处理
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>

否我无法修改名称值，原因是每行都有单独的保存按钮，单击该保存按钮，将保存整行数据。。有时我会得到一些数据，如
联系方式：“3”
，因此只有我使用了
==
。还使用了单独保存编辑了问题。。但是数据将来自api，比如
constdefaultdata=[{ContactMode:3}，{ContactMode:2}，{ContactMode:2}]
only..我认为这里唯一可能的方法是使用不同的名称。我已经更新了问题，说我不能修改
name
属性，因为我对每行都有单独的保存，所以数据将在每行中提交。。但是，当我接收数据时，我将其放入一个数组
defaultData
，我需要迭代它并为每个选中的单选按钮分配值..您定义了
handleInputChange
来使用
（e，index）
，但在UI中您颠倒了顺序
handleInputChange（index，event）
。您的
defaultData
还有两个
{ContactMode:2}
和一个
{ContactMode:1}
，可能这是故意的。正如@vkvkv所指出的，在所有无线电输入中使用相同的
name
属性将它们都放在同一个无线电组中，并且只能有一个选定的无线电组值。您可以控制输入的映射方式吗？你能分享更多关于每个按钮如何保存特定行的信息吗？如何识别行？保存的数据是什么？我有一个想法，但这取决于您对这些问题的回答，以便真正理解您的要求/限制。@DrewReese，我将使用edi