如何使我的输入单选按钮与我的反应列表正确工作

Question

我有一个对象列表显示在前端，还有一个单选按钮。

当用户选中单选按钮时，相应的对象详细信息将存储在表单字段中。

问题是我所有的单选按钮都在检查，这意味着用户可以选择多个对象，我不希望这样。我该怎么办

这是代码

<Form>
{freelancerArray.map((val, index) => (
<div className="d-flex gap-4 r-div" key={index}>
<Form.Check type="radio"
aria-label="1" 
onChange={(e) => {
if (e.target.checked) {
let acc = assignedfreelancer
acc.freelancerId = val.uid
acc.freelancerName =  val.name.firstname + val.name.lastname
setAssignedFreelancer(acc) 

} else {
console.log(assigneddata); 
} 
}}
value={assignedfreelancer}
/>
<div className="d-flex gap-3">
<div className="profile-image-div mt-1">
<img src={val.freelancerPhotoUrl} alt=" " className="profile-image"/>
</div>
<p className="mt-08 mb-0">{val.name.firstname} {val.name.lastname}</p>
</div>
</div>
))}
</Form>

这是所选自由职业者被更改为的状态

//form for freelancers that workorders are assigned to
const [assignedfreelancer, setAssignedFreelancer] = useState({
freelancerId: "",
freelancerName: ""
}) 

我的单选按钮像复选框一样工作，我不想要

Answer 1

• 您可以尝试以下方式：

<Form.Check type="radio"
aria-label="1" 
onChange={(e) => {
if (e.target.value) {
let acc = assignedfreelancer
acc.freelancerId = val.uid
acc.freelancerName =  val.name.firstname + val.name.lastname
setAssignedFreelancer(acc) 

} else {
console.log(assigneddata); 
} 
}}
value={val.uid}
checked={assignedfreelancer.freelancerId === val.uid}
/>