React单选按钮选中无视觉反馈问题求助

问题描述 #

使用React.js开发问卷模块，用户通过单选按钮回答问题以收集目标信息。当前问题：

• 选中单选按钮时，按钮气泡无填充变色，无法直观显示选中状态
• 点击提交后控制台能正确输出选中答案，过程无报错

测试用例 #

• 步骤1：阅读问题选择答案
  • 预期：选中答案时，单选按钮气泡显示选中状态
  • 实际：无任何视觉反馈
• 步骤2：完成选择后点击提交
  • 预期：控制台输出用户答案
  • 实际：控制台正常输出答案

问题根源 #

代码中单选按钮的checked属性绑定错误：
比如性别单选按钮里写的checked={formData.male === "male"}，但formData状态中并没有male字段，对应的字段是gender。所有单选组的checked属性都应该和对应state的键做比较，而非和单选按钮的id/value绑定不存在的state字段。

修复后的代码 #

修改Questions组件中所有单选按钮的checked属性，将其与对应state字段匹配：

import React, {useState} from 'react';
import 'bootstrap/dist/css/bootstrap.min.css'
import Form from 'react-bootstrap/Form';

export default function Questions() {
    const[formData, setFormData] = useState(
        {gender: "", userAge: "", goals:"", motivate: ""})

    function handleChange(event){
        const{name, value, type, checked} = event.target
       setFormData(prevFormData => {
        return {
            ...prevFormData,
            [name]: type === 'checkbox' ? checked : value 
        }
       })
    }

    function handleSubmit(event) {
        event.preventDefault()
        console.log(formData)
       }

    return (
        <>
        <header>Questions</header>

<Form onSubmit={handleSubmit}>

    <fieldset>
    <legend>What was your gender at birth</legend>
        <input 
        type='radio'
        id = 'male'
        name = 'gender' 
        value = 'male'
        checked={formData.gender === "male"}
        onChange={handleChange}/>
        <label htmlFor="male"> Male </label>
                <br />

        <input 
        type='radio'
        id='female'
        name='gender'
        value = 'female' 
        checked={formData.gender === "female"}
        onChange={handleChange}/>
        <label htmlFor="female"> Female </label>
                <br />
    </fieldset>
            <fieldset>
                <legend>How old are you?</legend>

                <input 
                type='radio'
                id="young"
                name="userAge"
                value="young"
                checked={formData.userAge === "young"}
                onChange={handleChange}
                />
                <label htmlFor="young"> 18-28 </label>
                <br />

                <input 
                type='radio'
                id="middleAged"
                name="userAge"
                value="middleAged"
                checked={formData.userAge === "middleAged"}
                onChange={handleChange}
                />
                <label htmlFor="middleAged"> 29-39 </label>
                <br />

                <input 
                type='radio'
                id="older"
                name="userAge"
                value="older"
                checked={formData.userAge === "older"}
                onChange={handleChange}
                />
                <label htmlFor="older"> 40-50 </label>
                <br />

                <input 
                type='radio'
                id="senior"
                name="userAge"
                value="senior"
                checked={formData.userAge === "senior"}
                onChange={handleChange}
                />
                <label htmlFor="senior"> 51+ </label>
                <br />
            </fieldset>
            <br />

            <fieldset>
                <legend>What kind of fitness would you prefer?</legend>

                <input 
                type="radio"
                id="active"
                name="goals"
                value="active"
                checked = {formData.goals === "active"}
                onChange={handleChange}
                />
                <label htmlFor='active'>To stay active!</label>
                <br />

                <input
                type="radio"
                id="weight"
                name="goals"
                value= "weight"
                checked = {formData.goals === "weight"}
                onChange={handleChange}
                />
                <label htmlFor="weight"> To loose weight</label>
            </fieldset>
            <br />

            <fieldset>
                <legend>What would help motivate you when exercising?</legend>

                <input 
                type ="radio"
                id="music"
                name = "motivate"
                value="music"
                checked = {formData.motivate === 'music'}
                onChange={handleChange}
                />
                <label htmlFor = "music"> Music</label>
                <br />

                <input
                type ="radio"
                id="speeches"
                name ="motivate"
                value ="speeches"
                checked = {formData.motivate === "speeches"}
                onChange = {handleChange}
                />
                <label htmlFor = "speeches">Motivational speeches</label>
                <br />

                <input
                type = "radio"
                id="videos"
                name ="motivate"
                value ="videos"
                checked ={formData.motivate === "videos"}
                onChange = {handleChange}
                />
                <label htmlFor = "videos"> Success Videos</label>
            </fieldset>
            <br />
            <br />
            <button>Submit</button>
            </Form>


        </>
    )
}

关键修改点 #

所有单选按钮的checked属性都改为与对应state字段比较：

• 性别组：checked={formData.gender === "male"}、checked={formData.gender === "female"}
• 年龄组：checked={formData.userAge === "young"}等
• 目标组：checked={formData.goals === "active"}等
• 激励组：checked={formData.motivate === "music"}等

这样React就能正确跟踪单选按钮的选中状态，同步更新视觉反馈。

内容的提问来源于stack exchange，提问作者user12761285