如何让React问卷组件中点击后的答案按钮保持高亮？

很遗憾，仅靠CSS无法实现已选按钮保持高亮的效果——因为CSS的focus状态是临时的：当用户点击其他元素时，之前获得焦点的按钮会自动失去focus状态，样式也就恢复默认了。要实现持久高亮，必须结合组件的状态来标记已选中的选项，再通过CSS类来应用高亮样式。

下面是具体的修改步骤：

1. 修改QuestionBox组件，添加选中状态判断 #

我们已经在Survey组件的state里记录了每个问题的答案，只需要把这个答案传递给QuestionBox，并在渲染按钮时判断当前选项是否是已选中的答案，给对应的按钮添加一个selected类：

const QuestionBox = ({ question, answer, onSelect }) => {
  const { question: questionText, answers } = question; // 解构重命名避免变量冲突
  return (
    <div>
      <p>
        {questionText}
        <br/>
        {answers.map((text, index) => (
          <button 
            className={`questionBtns ${answer === text ? 'selected' : ''}`} 
            key={index} 
            onClick={() => onSelect(text)}
          >
            {text}
          </button>
        ))}
      </p>
    </div>
  );
};
export default QuestionBox;

2. 添加CSS高亮样式 #

给selected类设置你想要的高亮样式，比如和focus状态一致的效果：

.questionBtns {
  /* 你的默认按钮样式 */
  padding: 8px 16px;
  margin: 4px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: white;
  cursor: pointer;
}

.questionBtns:focus,
.questionBtns.selected {
  /* 高亮样式，比如改变背景色和边框 */
  background-color: #4CAF50;
  color: white;
  border-color: #45a049;
}

3. 为什么必须修改组件？ #

CSS的状态（比如focus、hover）都是基于当前交互的临时状态，无法持久保存用户的选择记录。而我们需要的是持久化的选中状态，这必须依赖组件的state来存储用户的选择，再通过条件渲染给对应的按钮添加样式类，这样即使点击其他按钮，已选中的按钮也能保持高亮。

这样修改后，用户每选一个选项，对应的按钮就会一直保持高亮状态，完全符合你的需求啦～

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