首页 > 解决方案 > 如何在 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>

标签: javascriptreactjsradio-button

解决方案


推荐阅读