ReactJS实现单选列表：选中一项取消其他项，支持再次点击取消选中

针对你的React答题组件需求，我们可以通过状态管理和点击事件处理来实现单选及取消选中的功能，以下是具体步骤和完整代码：

1. 引入状态钩子 #

函数组件需要借助useState钩子来跟踪选中状态，先在组件顶部导入这个钩子。

2. 编写点击处理逻辑 #

创建一个点击事件函数，判断当前点击的选项是否为已选中项：

• 若是已选中项，则取消选中（将状态设为null）
• 若未选中，则将该选项设为当前选中项，自动覆盖之前的选中状态

3. 动态设置选中样式 #

给每个选项<li>添加动态类名，当选项被选中时，应用自定义的选中样式，让视觉效果更清晰。

完整代码示例 #

import { useState } from 'react';

function Questionnaire(props){
    // 初始化选中状态：null表示未选中任何选项
    const [selectedOption, setSelectedOption] = useState(null);

    // 处理选项点击事件
    const handleOptionClick = (option) => {
        // 点击已选中项则取消，否则切换为当前选项
        setSelectedOption(prev => prev === option ? null : option);
    };

    // 合并正确答案和错误答案，统一渲染（简化代码）
    const allOptions = [...props.incorrAns, props.corrAns];

    return(
        <div className="question">
            <div className="ques">{props.ques}</div>
            <ul className="options">
                {allOptions.map((option, index) => (
                    <li
                        key={index}
                        // 动态添加选中类
                        className={selectedOption === option ? 'selected' : ''}
                        // 绑定点击事件，传递当前选项
                        onClick={() => handleOptionClick(option)}
                    >
                        {option}
                    </li>
                ))}
            </ul>
        </div>          
    );
}

可选：添加选中样式 #

在CSS中补充.selected类的样式，让选中状态更直观：

.options li {
    padding: 8px 12px;
    margin: 8px 0;
    border: 1px solid #ddd;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.options li.selected {
    background-color: #e3f2fd;
    border-color: #2196f3;
}

代码说明 #

• useState(null)：初始化选中状态为null，表示初始无选中项
• handleOptionClick函数：通过对比当前点击项与之前选中项，实现选中/取消的逻辑
• allOptions：合并正确和错误答案，用map循环渲染选项，避免重复代码
• 动态className：根据selectedOption的值判断是否添加选中样式

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