React中如何实现点击按钮后保持高亮选中的效果？

实现逻辑 #

核心是通过状态管理选中的选项集合，点击时切换选中状态，动态绑定高亮样式：

• 用useState存储已选中的选项，推荐用Set类型，增删和存在性判断更方便
• 绑定按钮点击事件，点击时修改选中集合的对应选项状态
• 根据选项是否在选中集合内，给按钮动态设置高亮的样式/组件属性

完整代码示例 #

以下是适配你现有React Bootstrap组件的可运行代码：

import { useState } from 'react';
import { Stack, Button } from 'react-bootstrap';

function QuestionForm() {
  // 存储选中的选项集合
  const [selected, setSelected] = useState(new Set());

  // 切换选项选中状态
  const toggleOption = (option) => {
    const newSelected = new Set(selected);
    newSelected.has(option) ? newSelected.delete(option) : newSelected.add(option);
    setSelected(newSelected);
  };

  // 提交逻辑示例
  const handleSubmit = () => {
    // 转成数组即可拿到所有用户选中的答案
    const selectedAnswers = Array.from(selected);
    console.log('选中的答案：', selectedAnswers);
    // 后续提交逻辑写在这里
  };

  return (
    <>
      <Stack gap={2} className="col-md-5 mx-auto">
        <h1>Question to ask user ?</h1>
        <br />
        <Button 
          variant={selected.has('Option 1') ? 'primary' : 'outline-primary'}
          onClick={() => toggleOption('Option 1')}
        >
          Option 1
        </Button>
        <Button 
          variant={selected.has('Option 2') ? 'primary' : 'outline-primary'}
          onClick={() => toggleOption('Option 2')}
        >
          Option 2
        </Button>
        <Button 
          variant={selected.has('Option 3') ? 'primary' : 'outline-primary'}
          onClick={() => toggleOption('Option 3')}
        >
          Option 3
        </Button>
        <Button 
          variant={selected.has('Option 4') ? 'primary' : 'outline-primary'}
          onClick={() => toggleOption('Option 4')}
        >
          Option 4
        </Button>
        <Button 
          variant={selected.has('Option 5') ? 'primary' : 'outline-primary'}
          onClick={() => toggleOption('Option 5')}
        >
          Option 5
        </Button>
        <Button variant="success" onClick={handleSubmit} className="mt-3">
          提交答案
        </Button>
      </Stack>
    </>
  );
}

优化建议 #

如果选项数量较多，可把选项存入数组遍历渲染，避免写重复代码：

// 提前定义所有选项
const options = ['Option 1', 'Option 2', 'Option 3', 'Option 4', 'Option 5'];

// 渲染部分直接遍历生成按钮
{options.map(option => (
  <Button 
    key={option}
    variant={selected.has(option) ? 'primary' : 'outline-primary'}
    onClick={() => toggleOption(option)}
  >
    {option}
  </Button>
))}

如果不需要用React Bootstrap的内置样式，也可以自定义CSS高亮类，选中时绑定对应类名即可。

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