Javascript 单击“更改”按钮

我正在做一个预订项目。我正在我的索引页面上为每个资产设置一个跟踪按钮。当我将鼠标悬停在资产的图像上时，会出现该按钮。我正试图使它这样的按钮更改为另一个字体可怕的图标点击。我不知道从哪里开始。我想我需要建立一个新的状态，对吗

渲染

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

constmycomponent=（）=>{
const[clickedButton，setClickedButton]=useState（false）//创建新的状态
常数followActivity=（e）=>{
e、 预防默认值（）
e、 停止传播（）
设变量={
...
}
GQLClient（{}）.request（Mutation.addToCart，variables）
setClickedButton（true）//设置新状态
}
设btnHoverActions=''为
if（user.token==null）{
btnModalActions=(
...
)
}else if（user.role==='customer'）{
btnModalActions=(
...
)
//这需要根据状态进行更改
btnHoverActions=(
后续活动（e）}>
（单击按钮）？
() :
()
)
}
//这里没有变化
报税表（
{btnHoverActions}
...
)
}

我希望我正确地重建了您的组件，这将是有帮助的：D

我想我需要建立一个新的状态，对吗

是的，你是对的，你需要一些状态。根据我可以告诉您的情况，您正在使用一个功能组件，下面是我将如何做到这一点：

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

constmycomponent=（）=>{
const[clickedButton，setClickedButton]=useState（false）//创建新的状态
常数followActivity=（e）=>{
e、 预防默认值（）
e、 停止传播（）
设变量={
...
}
GQLClient（{}）.request（Mutation.addToCart，variables）
setClickedButton（true）//设置新状态
}
设btnHoverActions=''为
if（user.token==null）{
btnModalActions=(
...
)
}else if（user.role==='customer'）{
btnModalActions=(
...
)
//这需要根据状态进行更改
btnHoverActions=(
后续活动（e）}>
（单击按钮）？
() :
()
)
}
//这里没有变化
报税表（
{btnHoverActions}
...
)
}

---

我希望我正确地重建了您的组件，这将有帮助：D

您使用的是类组件还是函数组件？您使用的是类组件还是函数组件？我不知道昨晚为什么想得太多。这太完美了。非常感谢。我不知道昨晚为什么想得太多了。这太完美了。非常感谢。