ReactJS 点击更改按钮

Question

我正在做一个预订项目。 我正在为我的索引页面上的每个资产创建一个关注按钮。 当我在资产图像上 hover 时出现该按钮。 我正在尝试使它在单击时按钮更改为另一个字体真棒图标。 我不知道从哪里开始。 我想我需要制作一个新的 state，对吗？

使成为

<Card className={style.cardContainer}>
    <div className={style.hoverContainer}>
        <a onClick={modalShow}>
            <img className={style.cardImage} alt="activity preview" src={ NodeServerURL + activity.imageLocation }/>

            <div className={style.hoverOverlay}>
                {btnHoverActions}           
                <div className={style.hoverOverlayTextGroup}>
                      ...
                </div>
            </div>
        </a>
    </div>
</Card>

我如何分配它（仅显示角色是否为客户）

let btnHoverActions = ''

if (user.token === null) {
        btnModalActions = (
            <div className="float-right">
                ...
            </div>
        )
    } else if (user.role === 'customer') {
        btnModalActions = (
            <div className="float-right">
                ...
            </div>
        )

        btnHoverActions = (
            <a className={style.hoverOverlayButton} onClick={ (e) => followActivity(e)}>
                <i class="far fa-heart"></i>
            </a>
        )
    }

关注 function

const followActivity = (e) => {
    e.preventDefault()
    e.stopPropagation()

    let variables = {
        ...
    }

    GQLClient({}).request(Mutation.addToCart, variables)
}

Answer 1

我想我需要制作一个新的 state，对吗？

是的，你是对的，你需要一些 state。 根据我可以告诉您的是使用 function 组件，我将这样做：

const MyComponent = () => {
    const [clickedButton, setClickedButton] = useState(false)  //creating a new of state

    const followActivity = (e) => {
        e.preventDefault()
        e.stopPropagation()

        let variables = {
            ...
        }

        GQLClient({}).request(Mutation.addToCart, variables)

        setClickedButton(true) //setting the new state
    }

    let btnHoverActions = ''

    if (user.token === null) {
        btnModalActions = (
            <div className="float-right">
                ...
            </div>
        )
    } else if (user.role === 'customer') {
        btnModalActions = (
            <div className="float-right">
                ...
            </div>
        )

        //this needs to change depending on state
        btnHoverActions = (
            <a className={style.hoverOverlayButton} onClick={ (e) => followActivity(e)}>
                (clickedButton) ?
                    (<i class="some-different-class-for-the-icon"></i>) :
                    (<i class="far fa-heart"></i>)
            </a>
        )
    }

    //no changes here
    return ( 
        <Card className={style.cardContainer}>
            <div className={style.hoverContainer}>
                <a onClick={modalShow}>
                    <img className={style.cardImage} alt="activity preview" src={ NodeServerURL + activity.imageLocation }/>

                    <div className={style.hoverOverlay}>
                        {btnHoverActions}           
                        <div className={style.hoverOverlayTextGroup}>
                              ...
                        </div>
                    </div>
                </a>
            </div>
        </Card>
    )
}

我希望我正确地重建了你的组件，这会有所帮助：D