如何在列表中的指定单击按钮上设置“ Loader”状态：​​React

Question

我试图在单击指定按钮时将加载程序的状态设置为true，但是当设置为true时，单击单个按钮时，它将影响该列表中的所有其他按钮。

我经历了下面的线程，其中包含一个类似的问题，但是问题是我正在使用react-hooks，并且发现很难在react-hooks中实现类似的东西

React - Set loading state only on specific clicked button

//加载程序的设置状态

const [changeRole, setChangeRole] = useState(false);

//处理程序

  const _handleRoleChange = (e, role, id) => {
        e.preventDefault();
        setChangeRole(true);
        console.log(role, id);
        let formData = new FormData();
        formData.append("user_id", id);
        let url = (role === "manager") ? changeUserRoleToManager : changeUserRoleToMember;
        setTimeout( () => {
            axios.post(url, formData)
            .then(response => { 
                console.log(response)
                toast.success(response.data.message);
                setChangeRole(false);
            })
            .catch(error => {
                console.log(error.response)
                toast.error(error.response.data.message);
                setChangeRole(false);
            });
        }, 1000)

    };

//渲染部分

 data.map(member, i) => {
        return (
            <tr key={i}>
                <td>{member.id}</td>
                <td>{member.name}</td>
                <td>{member.role}</td>
                <td>
                    {member.pivot.role === "member" ? (
                        <Button
                            variant="primary"
                            onClick={e => {
                                _handleRoleChange(
                                    e,
                                    "manager",
                                    member.pivot.user_id
                                );
                            }}
                            loading={changeRole}
                        >
                            Change Role to Manager
                        </Button>
                    ) : (
                        <Button
                            variant="primary"
                            onClick={(e) => {
                                _handleRoleChange(
                                    e,
                                    "member",
                                    member.pivot.user_id
                                );
                            }}
                            loading={changeRole}
                        >
                            Change Role to Member
                        </Button>
                    )}
                </td>
            </tr>
        );
    };

Answer 1

这也可以帮助您

class ManageSpinner extends React.Component{

constructor(props){
    super(props);
    this.state={
        spinner:[]
    };
    this.showSpinner=this.showSpinner.bind(this);
    this.stopSpinner=this.stopSpinner.bind(this);
    this.activateSpinner=this.activateSpinner.bind(this);
    this._handleRoleChange=this._handleRoleChange.bind(this)
}
stopSpinner(id){
    this.setState({spinner:this.state.spinner.filter(obj=>obj!==id)})
}
showSpinner(id){
    return this.state.spinner.filter(obj=>obj===id).length!==0
}
activateSpinner(id){
    this.setState({spinner:[...this.state.spinner, id]})
}
_handleRoleChange(e, role, id){
    e.preventDefault();
    //setChangeRole(true);
    this.activateSpinner(id)
    console.log(role, id);
    let formData = new FormData();
    formData.append("user_id", id);
    let url = (role === "manager") ? changeUserRoleToManager : changeUserRoleToMember;
    setTimeout( () => {
        axios.post(url, formData)
        .then(response => { 
            console.log(response)
            toast.success(response.data.message);
            //setChangeRole(false);
            this.stopSpinner(id)
        })
        .catch(error => {
            console.log(error.response)
            toast.error(error.response.data.message);
            //setChangeRole(false);
            this.stopSpinner(id)
        });
    }, 1000)

};
render(){
    const changeRole=true;
    return(

            data.map((member, i) => {
                return (
                    <tr key={i}>
                        <td>{member.id}</td>
                        <td>{member.name}</td>
                        <td>{member.role}</td>
                        <td>
                            {member.pivot.role === "member" ? (
                                <Button
                                    variant="primary"
                                    onClick={e => {
                                        _handleRoleChange(
                                            e,
                                            "manager",
                                            member.pivot.user_id
                                        );
                                    }}
                                    loading={this.showSpinner(member.pivot.user_id)?changeRole:false}
                                >
                                    Change Role to Manager
                                </Button>
                            ) : (
                                <Button
                                    variant="primary"
                                    onClick={(e) => {
                                        _handleRoleChange(
                                            e,
                                            "member",
                                            member.pivot.user_id
                                        );
                                    }}
                                    loading={this.showSpinner(member.pivot.user_id)?changeRole:false}
                                >
                                    Change Role to Member
                                </Button>
                            )}
                        </td>
                    </tr>
                );
            })
    )
}

}

我认为member.pivot.user_id是唯一的。