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