时间戳

首页 > 解决方案 > 单击即可更新所有按钮。反应JS

javascript - 单击即可更新所有按钮。反应JS

问题描述

我添加了三个带有加载图标的按钮，如果我单击单个按钮，其余两个按钮也会显示加载状态。

我想我在该州做错了什么。

请在下面检查我的代码：

import React, { Component } from 'react'
import { Button } from 'react-bootstrap';


export default class LoadingBtn extends Component {
    state = {
        loading: false
    };

    clickFunction = () => {
        this.setState({
            loading: !this.state.loading
        })
    }

    render() {
        const { loading } = this.state;

        return (
            <div>
                <Button onClick={this.clickFunction}>
                    {loading && <i className="fa fa-refresh fa-spin"></i>}
                    {loading && <span>Joining app...</span>}
                    {!loading && <span>ALLOW</span>}
                </Button>
                <Button onClick={this.clickFunction}>
                    {loading && <i className="fa fa-refresh fa-spin"></i>}
                    {loading && <span>Joining app...</span>}
                    {!loading && <span>ALLOW</span>}
                </Button>
                <Button onClick={this.clickFunction}>
                    {loading && <i className="fa fa-refresh fa-spin"></i>}
                    {loading && <span>Joining app...</span>}
                    {!loading && <span>ALLOW</span>}
                </Button>
            </div>
        )
    }
}

在此处输入图像描述

标签： javascriptreactjsreact-hooks

解决方案

您正在使用单击时更新的单个状态值。所有按钮都链接到相同的状态值，因此当您单击其中任何一个时，它们都会对新状态做出反应。

您需要做的是更改您的函数以采用唯一值来表示单击、id 或名称上的每个按钮。

import React, { Component } from 'react'
import { Button } from 'react-bootstrap';


export default class LoadingBtn extends Component {
    state = {
        loading: false
    };

    clickFunction = (e) => {
        this.setState({
            loading: e.id
        })
    }

    render() {
        const { loading } = this.state.loading;

        return (
            <div>
                <Button
                id = "uniqueGeneratedIDForEachButton1"
                onClick={(e) => this.clickFunction(e)}>
                    {loading === "uniqueGeneratedIDForEachButton1" ? 
                    <i className="fa fa-refresh fa-spin"></i><span>Joining app...</span> : 
                    <span>ALLOW</span>}
                </Button>
                <Button
                id = "uniqueGeneratedIDForEachButton2"
                onClick={(e) => this.clickFunction(e)}>
                    {loading === "uniqueGeneratedIDForEachButton2" ? 
                    <i className="fa fa-refresh fa-spin"></i><span>Joining app...</span> : 
                    <span>ALLOW</span>}
                </Button>
                <Button
                id = "uniqueGeneratedIDForEachButton3"
                onClick={(e) => this.clickFunction(e)}>
                    {loading === "uniqueGeneratedIDForEachButton3" ? 
                    <i className="fa fa-refresh fa-spin"></i><span>Joining app...</span> : 
                    <span>ALLOW</span>}
                </Button>
            </div>
        )
    }
}

推荐阅读