javascript - 如何在 React 中获取单选按钮值
问题描述
我如何仅从收音机按钮中获得单个组的收音机按钮值,而在检查另一个收音机时,必须删除旧的检查无线电值并添加新的电台值,这是函数
const CheckRadio = (e) => {
let values = 0;
let RadioInputs = document.querySelectorAll(`input[name=${e.target.name}]`);
for(let radio of RadioInputs){
values += Number(radio.value) ;
if(radio.checked){
setModifiresCost(ModifiresCost + (Number(radio.value) <= values ? Number(radio.value) : 0) );
values -= Number(radio.value);
setSelectedModifire([...SelectedModifire , JSON.parse(radio.getAttribute('data-item'))]);
}else{
setModifiresCost(ModifiresCost - (Number(radio.value) - values < 0 ? 0 : Number(radio.value)) );
let NewModifires = SelectedModifire.filter(item => item.id !== JSON.parse(radio.getAttribute('data-item')).id);
setSelectedModifire(NewModifires);
}
}
}
这是 JSX 代码
<div className="choices ">
{addon.addons.map(itm => (
<label key={itm.id} className="modifier custom-control custom-radio d-flex justify-content-between align-items-center" onChange={CheckRadio} >
<div className='p-1'>
<input value={itm.price} data-item={JSON.stringify(itm)} className="custom-control-input OneChoice" name={`myradio${i}`} type="radio" />
<div className="custom-control-label">{itm.name}</div>
</div>
{itm.price == 0 ? (null) : (
<span>{itm.price} {Order.SpecItem.prices ? Order.SpecItem.prices.currency : null} </span>
)}
</label>
))}
</div>
解决方案
推荐阅读
- assembly - 如何正确输入字符串并输出?
- javascript - 使用 if 和 else 检查 for 循环中的所有值
- angular - 在ngrx效果中嵌套管道需要什么?
- c# - 无法使用 List 手动创建 Lambda 表达式树
- python - Django ORM:如何对一个值进行分组并获取该组中最后一个元素的不同值
- python - ValueError:使用序列设置数组元素。如何将我的功能重新排列到 np.arrays?
- java - 转换为泛型类型并调用 doubleValue() 方法
- javascript - 将 innerHTML 切换为不同的值 onclick()
- python - PYTHON:在文本文件中搜索一个单词,其中包含单词之间的空格
- r - r:提取和填充具有多个后续日期的行上缺失日期的函数