javascript - ReactJS 单击时更改按钮
问题描述
我正在做一个预订项目。我正在为我的索引页面上的每个资产创建一个关注按钮。当我将鼠标悬停在资产的图像上时,会出现该按钮。我正在尝试使按钮在单击时更改为另一个字体真棒图标。我不知道从哪里开始。我想我需要建立一个新的状态,对吗?
使成为
<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)
}
解决方案
我想我需要建立一个新的状态,对吗?
是的,你是对的,你需要一些状态。根据我可以告诉您正在使用功能组件的内容,我将这样做:
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
推荐阅读
- javascript - 如何在javascript中同步运行foreach循环
- python - 有没有办法确保我的光标在我的 Python API 脚本中保持连接到 MySQL
- javascript - 从 Web 应用程序(例如 JavaScript)中的非默认播放设备播放音频
- python - 使用 docker 部署但在本地工作时出现“WebDriver Manager firefox:未找到”
- python - 如何在普通函数中等待函数
- python - 对 findContours() 的返回值进行排序;轮廓列表
- r - 查找模式并替换
- swift - 如何在 SwiftUI 中将对象属性作为参数传递?
- r - 图的特定部分需要集成,它来自多项式,但每次在 rstudio 中出现错误
- javascript - 无法从子组件获取映射索引的值以在 React 中作为函数参数传递