React.js中点击答题选项时如何更改边框及背景色实现答题反馈

实现步骤 #

首先需要新增状态记录每道题的作答情况，再给选项添加动态样式类，最后补充对应的CSS样式即可，具体修改如下：

1. 修改Home.js文件

import React, { useState } from 'react'
import Questions from './Questions'

const Home = () => {
    // 记录每道题的用户作答情况，key为题目序号，value为用户选中的答案
    const [userAnswers, setUserAnswers] = useState({})

    // 选项点击事件，接收题目序号和选中的选项内容
    const handleOptionClick = (questionNumb, selectedOption) => {
        // 已经作答的题目不再响应点击
        if(userAnswers[questionNumb]) return
        setUserAnswers({
            ...userAnswers,
            [questionNumb]: selectedOption
        })
    }

    return (
        <>
        <div className="main">
            {
            Questions.map((item)=>(
                <div className="box" key={item.numb}>
                <div className="title">
                <h2 className="qno">{item.numb}</h2> 
                <h2> {item.question}</h2>
                </div>
                <div className="options">
                    {/* 遍历所有选项 */}
                    {Object.values(item.options).map(option => {
                        // 判断当前题是否已作答
                        const isAnswered = !!userAnswers[item.numb]
                        // 判断当前选项是不是正确答案
                        const isCorrect = option === item.answer
                        
                        // 动态生成样式类
                        let optionClass = ''
                        if(isAnswered){
                            optionClass = isCorrect ? 'correct' : 'wrong'
                        }

                        return (
                            <span 
                                key={option}
                                className={optionClass}
                                onClick={() => handleOptionClick(item.numb, option)}
                            >
                                {option}
                            </span>
                        )
                    })}
                </div>
            </div>
            ))    
            }
        </div>
        </>
    )
}

export default Home;

2. 补充style.css样式

在现有CSS基础上添加以下样式：

.options span {
    padding: 10px 15px;
    margin: 8px 0;
    border: 2px solid #ccc;
    border-radius: 5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

/* 已作答的选项不再可点击 */
.options span.correct, .options span.wrong {
    cursor: not-allowed;
}

/* 正确答案样式：绿色边框+浅绿色背景 */
.correct {
    border-color: #2ecc71 !important;
    background-color: #d4edda;
}

/* 错误答案样式：红色边框 */
.wrong {
    border-color: #e74c3c !important;
}

效果说明

• 未作答时所有选项显示默认灰色边框，可点击选择
• 点击正确答案：该选项显示绿色边框+浅绿色背景，完全匹配需求1
• 点击错误答案：所有错误选项显示红色边框，正确选项自动高亮为绿色背景+绿色边框，完全匹配需求2
• 已作答的题目不再响应后续点击，避免重复作答

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