调查问卷多组评分按钮点击后前序选中样式丢失问题求助

问题根源 #

你遇到的问题本质是两个基础逻辑错误：

• :focus 伪类同一时间页面只能有一个元素持有，点击其他按钮后前一个按钮自然失去焦点，样式失效
• 普通 type="button" 的输入框没有原生 :checked 状态，你写的 :checked:focus 样式完全不会生效，这个属性是单选/复选框特有的，和之前用radio实现的历史逻辑冲突
• 按钮绑定的onChange事件不适用button类型输入框，应该用onClick触发交互

解决方案 #

步骤1：新增状态存储每个问题的选中值 #

在组件内新增state保存所有问题的选中结果：

// 初始化状态，key为问题索引，value为选中的分值
const [selectedAnswers, setSelectedAnswers] = useState({})

步骤2：新增点击事件保存选中结果 #

替换原有handleChange为按钮点击事件：

const handleOptionClick = (questionIndex, selectedValue) => {
  setSelectedAnswers(prev => ({
    ...prev,
    // 保存对应问题的选中分值
    [questionIndex]: selectedValue
  }))
  // 原有提交答案逻辑可以加在这里
}

步骤3：动态给选中按钮加样式类 #

修改每个按钮的渲染逻辑，动态判断是否添加选中态类名，以第一个按钮为例：

<input
  type="button"
  name={`${i}`}
  value={step.reverseValue === true ? '7' : '1'}
  // 动态判断是否加选中类
  className={`${styles.oneButton} ${selectedAnswers[i] === (step.reverseValue === true ? '7' : '1') ? styles.selected : ''}`}
  // 替换onChange为onClick
  onClick={() => handleOptionClick(i, step.reverseValue === true ? '7' : '1')}
/>

其余6个按钮按照相同逻辑修改即可。

步骤4：修改CSS选中态样式 #

把所有:focus、:checked:focus的样式替换为.selected类样式，以第一个按钮为例：

/* 替换原有的:focus、:checked:focus样式 */
input[type='button'].oneButton.selected {
  position: relative;
  background-color: #6C1111;
  color: #6C1111;
}

其余6个按钮的样式按照相同规则修改即可，原有基础样式不需要调整。

额外优化建议 #

可以在跳转下一页的逻辑里清空selectedAnswers状态，实现选中态重置的需求；同时可以通过判断selectedAnswers的长度是否等于3，来控制下一页按钮的可用状态。

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