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;

任何帮助，我们将不胜感激。谢谢！！！

enter image description here enter image description here

Answer 1

在this.state.active中，只有一个布尔值作为活动标记。

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

Answer 2

问题是这个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>
        )

这只是一个有关如何仅使用一种状态来管理按钮状态的示例，现在该示例将适应您的代码

在ReactJS中遇到多个活动状态的麻烦

2 个答案: