Javascript 在ReactJS中有多个活动状态的问题

祝各位飞越者星期一快乐！我只是想知道是否有任何方法可以在单击时保持活动状态彼此独立。我似乎不知道如何使他们彼此独立。我将状态作为切换。默认情况下，每个按钮的活动状态为false。单击时，它将切换到相反的状态。问题是当单击其中一个按钮时，状态被切换，其他按钮的状态也被切换。请参阅下面的代码：

    import React, {Component} from "react";
import { Button, Progress } from 'reactstrap';
import "../src/Questions.css";


const items = [
    {
        question:"Category",
        buttonList: [
            'Games',
            "Business",
            'Education',
            'Lifestyle',
            "Entertainment",
            "Utility",
            "Social",
            "Other"
        ],
        multiple: false,
        answers: [],

    },
    {
        question:"Platform",
        buttonList: [
            'Android',
            'iOS',
            'Both'
        ],
        multiple: false,
        answers: [],

    },
    {
        question:"Design Type",
        buttonList: [
            'Barebones',
            'Stock',
            'Custom'
        ],
        multiple: false,
        answers: [],

    },
    {
        question:"Development Type",
        buttonList: [
            'Native',
            'Web',
            'Hybrid'
        ],
        multiple: false,
        answers: [],

    },
    {
        question:"Does the app connect to a server",
        buttonList: [
            'Yes',
            'No'

        ],
        multiple: false,
        answers: [],

    },
    {
        question:"Does the app require users to sign in",
        buttonList: [
            'Yes',
            'No'

        ],
        multiple: false,
        answers: [],

    },
    {
        question:"Additional Features",
        buttonList: [
            'Audio',
            'Camera',
            '3rd party API',
            "Dashboard",
            "Social login",
            "Task list",
            "Search",
            "Rating system",
            "Chat",
            "Privacy Settings",
            "Gallery",
            "QR code",
            "Calendar",
            "Social sharing",
            "Activity feed",
            "Push notifications",
            "Ads",
            "Multilangual",
            "Feedback",
            "Data collection",
            "Geo location",
            "Office capabilities",
            "Activity tracking",
            "Augmented reality",
            "Virtual reality",
            "Data export",
            "Maps",
            "Backup"
        ],
        multiple: true,
        answers: [],

    },
    {
        question:"Last Step",
        buttonList: [
            'Games3',
            'Business3',
            'Education3'
        ],
        multiple: false,
        answers: [],

    },
];

function checkElementIsSelected(array, element) {
    if (array.length === 0) {
        return false;
    }

    return(array.find(item => {
        return item === element;
    }));
}

class Questions extends React.Component {
  constructor(props) {
    super(props);
    this.state = { 
        value:0,
        count:0,
        display: items[0]['question'],
        active:false

    }};

 handleClickNext = (e) => {
     e.preventDefault();
     this.setState({
         value:this.state.value +10,
         count: this.state.count + 1,
         display: items[this.state.count]['question'],
         email: ''
     })

     console.log('+++', this.state.count);
 }

handleClickAnswer = (e) => {
    e.preventDefault();

    const question = this.state.count;
    if (!items[this.state.count].multiple) {
        items[this.state.count].answers = [e.target.value];
    } else {
        if (!checkElementIsSelected (items[this.state.count].answers, e.target.value)) {
            items[this.state.count].answers.push(e.target.value);
        }
    }
    console.log('--- answers: ', items[this.state.count].answers);

        this.setState({
            active:!this.state.active
        })
        console.log("True or False Active",this.state.active );

}


handleSubmit = (e) => {
    e.preventDefault();
    this.props.history.push("/Success");
    console.log('***', items);
}

handleEmail = (e) => {
    e.preventDefault();

    items[items.length - 1].answers = [e.target.value];
    console.log("$$$Emails: '", items[items.length - 1].answers);

}


render() {
    let element;
    let next;

    if (this.state.count === items.length) {
        element = <input type="text" onChange={this.handleEmail}/>
        next = <Button color='primary' onClick={this.handleSubmit}>Get my estimate</Button>

    } else {
        element = items[this.state.count].buttonList.map(btn => {
            return (
                <div>
                    <Button outline color="primary" value={btn} onClick={this.handleClickAnswer} active={this.state.active}>{btn}</Button>
                </div>
            )
        });

        next = <Button onClick={this.handleClickNext} color="primary" size="lg" value='Next'>Next</Button>;
    }


    return(
        <div>
            <div><Progress value={this.state.count * (100 / items.length)} /></div>
            <div className="howMuchText">How much does it cost to build an app</div>
            <div className="questionTitle">{this.state.display}</div>
            <div className="buttonChoices">
                {
                    element
                }
            </div>

            <div className="nextButton">
                {next}
            </div>
        </div>
    )
 }
}

  export default Questions;

import React，{Component}来自“React”；
从“reactstrap”导入{按钮，进度}；
导入“./src/Questions.css”；
常数项=[
{
问题：“类别”，
按钮列表：[
“游戏”，
“业务”，
"教育",，
“生活方式”，
“娱乐”，
“效用”，
“社会的”，
“其他”
],
多重：假，
答复：[]，
},
{
问题：“平台”，
按钮列表：[
“安卓”，
“iOS”，
“都是”
],
多重：假，
答复：[]，
},
{
问题：“设计类型”，
按钮列表：[
"赤骨",，
“股票”，
“习俗”
],
多重：假，
答复：[]，
},
{
问题：“发展类型”，
按钮列表：[
“本地人”，
“网络”，
“混合型”
],
多重：假，
答复：[]，
},
{
问题：“应用程序是否连接到服务器”，
按钮列表：[
“是的”，
“不”
],
多重：假，
答复：[]，
},
{
问题：“应用程序是否要求用户登录”，
按钮列表：[
“是的”，
“不”
],
多重：假，
答复：[]，
},
{
问题：“附加功能”，
按钮列表：[
“音频”，
“照相机”，
“第三方API”，
“仪表板”，
“社交登录”，
“任务列表”，
“搜索”，
“评级制度”，
“聊天”，
“隐私设置”，
“画廊”，
“二维码”，
“日历”，
“社会共享”，
“活动提要”，
“推送通知”，
“广告”，
“多语言”，
“反馈”，
“数据收集”，
“地理位置”，
“办公能力”，
“活动跟踪”，
“增强现实”，
“虚拟现实”，
“数据导出”，
“地图”，
“备份”
],
多重：对，
答复：[]，
},
{
问题：“最后一步”，
按钮列表：[
“游戏3”，
“业务3”，
“教育3”
],
多重：假，
答复：[]，
},
];
函数checkElementIsSelected（数组，元素）{
if（array.length==0）{
返回false；
}
返回（array.find（item=>{
返回项===元素；
}));
}
类问题扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={
值：0，
计数：0，
显示：项目[0][“问题”]，
活动：错误
}};
handleClickNext=（e）=>{
e、 预防默认值（）；
这是我的国家({
值：this.state.value+10，
计数：this.state.count+1，
显示：项[this.state.count]['question']，
电子邮件：“”
})
console.log（'++'，this.state.count）；
}
handleClickAnswer=（e）=>{
e、 预防默认值（）；
const question=this.state.count；
如果（！items[this.state.count].多个）{
items[this.state.count].answers=[e.target.value]；
}否则{
如果（！checkElementIsSelected（项[this.state.count].answers，e.target.value））{
items[this.state.count].answers.push（e.target.value）；
}
}
console.log（'--answers:'，items[this.state.count].answers]；
这是我的国家({
活动：！this.state.active
})
console.log（“真或假活动”，this.state.Active）；
}
handleSubmit=（e）=>{
e、 预防默认值（）；
这个.props.history.push（“/Success”）；
console.log（'***'，items）；
}
handleEmail=（e）=>{
e、 预防默认值（）；
items[items.length-1]。answers=[e.target.value]；
console.log（“$$$Emails:”，items[items.length-1].answers）；
}
render（）{
let元素；
让我们下一步；
if（this.state.count==items.length）{
元素=
下一步=得到我的估价
}否则{
element=items[this.state.count].buttonList.map（btn=>{
返回(
{btn}
)
});
下一个=下一个；
}
返回(
构建一个应用程序需要多少钱
{this.state.display}
{
要素
}
{next}
)
}
}
导出默认问题；

非常感谢您的帮助。谢谢

---

在

this.state.active

中，只有一个布尔值作为活动的标志

---

将

this.state.active

更改为具有与btn名称对应的键的对象，并在其中为每个按钮存储一个布尔标志。

问题在于此

active={this.state.active}

您只需一个状态即可管理所有按钮。活动。你需要为每个按钮设置一个状态。 这里有一些例子

        state {
            btnA:false,
            btnB:false,
            btnC:false
        }

        changeState = (btn) => {
            if(btn === 'a'){
                this.setState( prevState => {
                    return {
                        btnA:  !prevState.btnA
                    }
                })
            }
            .... same for btnB and btn C
        }
        ...

        return (
            <div>
                <button onClick={this.state.changeState('a')} >{this.state.btnA?'Btn A is active':'Btn A is not active'}<button>
                <button onClick={this.state.changeState('b')} >{this.state.btnB?'Btn B is active':'Btn B is not active'}<button>
                <button onClick={this.state.changeState('c')} >{this.state.btnB?'Btn C is active':'Btn C is not active'}<button>
            </div>
        )

状态{
btnA：错，
btnB：错，
btnC:错误
}
变更状态=（btn）=>{
如果（btn=='a'）{
this.setState（prevState=>{
返回{
btnA:！prevState.btnA