ReactJS 单击时更改按钮

Question

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

渲染

<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>
        )
    }

跟随功能

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

    let variables = {
        ...
    }

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

Answer 1

我想我需要创建一个新状态，对吗？

是的，你是对的，你需要一些状态。根据我可以告诉你的是使用函数组件，我会这样做：

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