单击卡片时，进度条必须随着 useEffect 前进。我怎样才能做到这一点？

Question

我希望当我使用 useEffect 点击三张卡片中的一张时，进度条会前进，以便它有动画。我能怎么做？这样写会让我在 Hook 规则上出错。如果有另一种不使用 useEffect 的方法就好了，重要的是有动画，当我按下卡片时你会推进进度条（并且另一个 div 出现，但已经实现了）。

我正在使用 Bootstrap 进度条和 React。

提前致谢！

import React, {useEffect, useState} from 'react'
import $ from 'jquery';
import {ProgressBar, Button} from 'react-bootstrap';
import {Register, RegisterChoice, RegisterChoiceEmail, RegisterChoiceH1, RegisterChoiceWrapper, RegisterChoiceWrapperEmail, RegisterChoiceCard, RegisterChoiceIcon, RegisterChoiceH2, ProgressBarComponent, RegisterEmail} from './SceltaRegistrazioneElements'
import FacebookLogin from 'react-facebook-login';
import {FaFacebookF} from 'react-icons/fa';
import GoogleLogin from 'react-google-login';
import GoogleButton from 'react-google-button';

const responseFacebook = (response) => {
    console.log(response);
    console.log(response.profileObj);
}

const responseGoogle = (response) => {
    console.log(response);
    console.log(response.profileObj);
}

const Registrazione = () => {
    const [percentage, setPercentage] = useState(20);

    function RegisterChoiceClicked() {
        return (
            $('#registerChoice').hide(), 
            $('#registerChoiceEmail').css("display", "flex"),
            useEffect(() => {
                setPercentage((oldPercentage) => {
                    return oldPercentage + 20;
                });
            }, 500)
        );
    }

    return (
        <Register>
            <RegisterChoice id="registerChoice">
                <RegisterChoiceH1>Sei una struttura, vuoi diventare un pet sitter o un cliente?</RegisterChoiceH1>
                <RegisterChoiceWrapper>
                    <RegisterChoiceCard onClick={RegisterChoiceClicked}>
                        <RegisterChoiceIcon src={require('../../../images/structure.jpg').default}/>
                        <RegisterChoiceH2>Struttura</RegisterChoiceH2>
                    </RegisterChoiceCard>
                    <RegisterChoiceCard onClick={RegisterChoiceClicked}>
                        <RegisterChoiceIcon src={require('../../../images/petSitter.jpg').default}/>
                        <RegisterChoiceH2>Pet sitter</RegisterChoiceH2>
                    </RegisterChoiceCard>
                    <RegisterChoiceCard onClick={RegisterChoiceClicked}>
                        <RegisterChoiceIcon src={require('../../../images/client.jpg').default}/>
                        <RegisterChoiceH2>Cliente</RegisterChoiceH2>
                    </RegisterChoiceCard>
                </RegisterChoiceWrapper>
            </RegisterChoice>
            <RegisterChoiceEmail id="registerChoiceEmail">
                <RegisterChoiceH1>Come vuoi registrarti?</RegisterChoiceH1>
                <RegisterChoiceWrapperEmail>
                    <Button variant="primary w-100" onClick={RegisterChoiceClicked}>Accedi con l'email</Button>
                    <FacebookLogin
                        appId=""
                        autoLoad={false}
                        fields="name,email,picture"
                        callback={responseFacebook}
                        textButton="Registrati con Facebook"
                        icon={<FaFacebookF  style={{marginRight: "10px", marginBottom: "3px"}}></FaFacebookF>}
                        cssClass="btnFacebook"
                        language="it_IT"
                    />
                    <GoogleLogin
                        clientId=""
                        buttonText="Accedi con Google"
                        onSuccess={responseGoogle}
                        onFailure={responseGoogle}
                        cookiePolicy={'single_host_origin'}
                        isSignedIn={true}
                        language="it_IT"
                        render={renderProps => (
                            <GoogleButton 
                                onClick={renderProps.onClick}
                                label='Registrati con Google'
                                style={{fontWeight: "700", fontFamily: "Helvetica, sans-serif", WebkitFontSmoothing: "antialiased", justifyContent: "center", minWidth: "240px"}}
                            />
                        )}
                    />
                </RegisterChoiceWrapperEmail>
            </RegisterChoiceEmail>
            <ProgressBar striped animated variant="success" now={percentage} style={{width: "70%", margin: "90px auto"}} />
        </Register>
    )
}

export default Registrazione

Answer 1

没有 useEffect 和 jquery 也可以做到。您有 RegisterChoiceClicked 用于在点击时推进进度条。然后你可以创建像 const [click, setClick] = useState(false) 这样的布尔变量，以便通过条件使用 DOM 进行操作。参见 example

单击卡片时，进度条必须随着 useEffect 前进。我怎样才能做到这一点？

When card is clicked, progress bar have to advance with useEffect. How can i do this?

javascript

reactjs

bootstrap-4

progress-bar