javascript - 在 ReactJS 中遇到多个事件状态的问题

Question

祝大家周一快乐 stackOverflowers!我只是想知道是否有任何方法可以在单击时保持事件状态彼此独立。我似乎无法弄清楚如何使它们彼此独立。我将状态作为切换。每个按钮的事件状态默认为 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;

非常感谢任何帮助。谢谢!!!!

Answer 1

在 this.state.active 中，您只有一个 bool 值作为事件标志。

将 this.state.active 更改为具有与 btn 名称相对应的键的对象，并为每个按钮存储一个 bool 标志。