React Toggle Active Class 在多个 Reactstrap 按钮之间

Question

我是 React 和 Reactstrap 的新手。我正在尝试将 active class 或 active 属性设置为单个按钮 onclick。我当前的设置同时切换所有按钮。单击时在按钮状态之间独立切换 active states 的最佳方法是什么？

import React, { Component } from 'react'
import { Button } from "reactstrap";

export class Payment extends Component {
    constructor(props) {
  super(props);
  
  this.state = {
   paymentSelection: 'credit',
   active: false
  }

 }

 toggleContent = (event) => {
  const currentState = this.state.active;
  event.preventDefault();
  this.setState({
   paymentSelection: event.target.value,
   active: !currentState
  })
 }

 switchContent = (value) => {
  switch (value) {
   case 'credit':
    return <div>
     <p>Credit Content Here</p>
    </div>;
   case 'paypal':
    return <div>
     <p>PayPal Content Here</p>
    </div>;
   case 'amazon':
    return <div>
    <p>Amazon Content Here</p>
   </div>;
   case 'more':
    return <div>
    <p>More Content Here</p>
   </div>;
   default:
    return null;
  }
 }

    render() {
  const { paymentSelection } = this.state;
  const { active } = this.state;

        return (
            <div className="container-fluid payment-btn-group">
    <Button outline className={active ? 'active': null} color="secondary" value="credit" onClick={this.toggleContent} >Credit Card</Button>
    <Button outline className={active ? 'active': null} color="secondary" value="paypal" onClick={this.toggleContent} >PayPal</Button>
    <Button outline className={active ? 'active': null} color="secondary" value="amazon" onClick={this.toggleContent} >Amazon</Button>
    <Button outline className={active ? 'active': null} color="secondary" value="more" onClick={this.toggleContent} >+ More</Button>
    {this.switchContent(paymentSelection)}
            </div>
        );
    }
}

export default Payment

Answer 1

您可以像这样设置活动class

 className={paymentSelection ==='credit' ? 'active' : null}

您已经在状态下选择了付款方式，您只需要检查是否应用它。

Demo

React Toggle Active Class 在多个 Reactstrap 按钮之间

React Toggle Active Class between multiple Reactstrap Buttons

reactjs

reactstrap