Javascript 在react中获取选定的单选按钮值

我试图从4个单选按钮（同名）中获取选中单选按钮的值。这些都在功能组件内部。但是要得到这些值会有一些麻烦

{details.map(questions => {
            const { counter, question, option1, option2, option3, option4, crr_option } = questions

            return (
                <div key={counter}>
                    <h2>{counter}. {question}</h2>
                    <div className="q-cont">
                        <div className="radio-cont">
                            <label htmlFor="op1">{option1}</label>
                            <input label={option1} type="radio" name="op" id="op1" />
                        </div>
                        <div className="radio-cont">
                            <label htmlFor="op2">{option2}</label>
                            <input type="radio" name="op" id="op2" />
                        </div>
                        <div className="radio-cont">
                            <label htmlFor="op3">{option3}</label>
                            <input type="radio" name="op" id="op3" />
                        </div>
                        <div className="radio-cont">
                            <label htmlFor="op4">{option4}</label>
                            <input type="radio" name="op" id="op" />
                        </div>
                    </div>
                </div>
            );
        })}

{details.map（问题=>{
常数{计数器，问题，选项1，选项2，选项3，选项4，crr_选项}=问题
返回(
{计数器}.{问题}
{option1}
{option2}
{option3}
{option4}
);
})}

很简单，您需要为每个单选按钮提供一个

值

属性和一个

onClick

侦听器来收集结果。我在这里创建了一个最小的工作示例：