在 React 中单击时如何保持按钮突出显示？

Question

我是 React 新手，并试图弄清楚如何在单击时保持按钮突出显示。期望的行为就像一个表单，向用户询问一个问题，并且可以选择多个答案来提交。单击的每个答案（按钮）都将保持突出显示。有没有办法达到这个效果？

<>
  <Stack gap={2} className="col-md-5 mx-auto">
    <h1>Question to ask user ?</h1>
    <br />
    <Button>Option 1</Button>
    <Button>Option 2</Button>
    <Button>Option 3</Button>
    <Button>Option 4</Button>
    <Button>Option 5</Button>
  </Stack>
</>

Answer 1

我认为您可能对这篇文章的最佳答案感兴趣：How to keep :active css style after click a button。我认为他们提供的 JS 答案正是您要寻找的，只是不包括删除类部分。

Answer 2

创建扩展 Button 的新组件并在其中分配状态。

    class NewButton extends React.Component {
    
        constructor(props) {
            super(props);
            this.state = {
                selected: null
            }
        }
    
        buttonSelected = selected => ev => {
            this.setState({ selected })
        }
    
        render() {
            return (
                <Button className={key === this.state.selected ? 'selected' : ''}>
                     {this.props}
                <Button>
    );
        }
    }

Answer 3

如果您只想在单击时突出显示按钮，您可以根据具体情况使用 css 选择器，例如 :visited 和 :active。

---

但是您要求的内容需要其他内容，也许您可​​以为此使用复选框，也可以使用此

 class Form extends React.Component {
    state = {
        selected: [],
    };

    selectButton = (name) => {
        const tempSelected = { ...this.state.selected };
        tempSelected.push(name);
        this.setState({ selected: tempSelected });
    };
    isSelected = (name) => {
        return this.state.selected.includes(name);
    };

    render() {
        return (
            <>
                <button onClick={(e) => selectButton("A")} className={this.isSelected("A") ? "selected" : ""}>
                    A
                </button>
                <button onClick={(e) => selectButton("B")} className={this.isSelected("B") ? "selected" : ""}>
                    B
                </button>
                <button onClick={(e) => selectButton("C")} className={this.isSelected("C") ? "selected" : ""}>
                    C
                </button>
                <button onClick={(e) => selectButton("D")} className={this.isSelected("D") ? "selected" : ""}>
                    D
                </button>
            </>
        );
    }
}