React 在多个 Reactstrap 按钮之间切换活动类答案

【问题标题】：React Toggle Active Class between multiple Reactstrap ButtonsReact 在多个 Reactstrap 按钮之间切换活动类
【发布时间】：2019-06-03 19:47:28
【问题描述】：

我是 React 和 Reactstrap 的新手。我正在尝试将活动类或活动属性设置为单击时的单个按钮。我当前的设置同时切换所有按钮。单击时在按钮状态之间独立切换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

【问题讨论】：

标签： reactjs reactstrap

【解决方案1】：

你可以这样设置活动类

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

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

Demo

【讨论】：

谢谢，它对我有用。