[英]Fixing conditional state behavior for rendering for Mui <Cards>
I have a list of Mui cards.我有一张梅卡的清单。 On a card hover, I would like a Floating Action Button to appear inside the card.在卡片 hover 上,我希望卡片内出现浮动操作按钮。 I'm using state to achieve this, the issue is that the hover state is being applied to ALL cards during state change, meaning the button is showing up on every card, and not the one that's being pointed at/hovered. I'm using state to achieve this, the issue is that the hover state is being applied to ALL cards during state change, meaning the button is showing up on every card, and not the one that's being pointed at/hovered. How can I control this to that the button is only showing on THE card where the state action was being fired off.我怎样才能控制这个按钮只显示在 state 动作被触发的卡上。
Also, is there anyway to not cause state change to re-render other components?此外,无论如何不会导致 state 更改以重新渲染其他组件? I have a <ChartistGraph>
that is being re-rendered on hover which constantly has it's animation repeated.我有一个<ChartistGraph>
正在 hover 上重新渲染,它不断重复它的 animation。
Essentially this is what I'm doing:基本上这就是我正在做的事情:
const [state, setState] = useState({
actionButton: false
});
My card:我的卡:
<Card
className="miniGraphCards"
onMouseOver={() => setState({ actionButton: true })}
onMouseOut={() => setState({ actionButton: false })}
>
Conditional rendering based off state and hover:基于 state 和 hover 的条件渲染:
{state && state.actionButton != false &&
<Fab>
<EmojiEmotionsIcon />
</Fab>}
Please see reproducible code: You will notice the repeat re-rendering of the graphs and the button being applied to all cards on hover.请查看可重现的代码:您会注意到图形的重复重新渲染以及按钮被应用于 hover 上的所有卡。
https://codesandbox.io/s/elastic-kowalevski-j3wjx https://codesandbox.io/s/elastic-kowalevski-j3wjx
You are saving the 'state' on the App
component.您正在App
组件上保存“状态”。 Your boolean actionButton
will trigger for all the items.您的 boolean actionButton
将为所有项目触发。
Since you want the App
to know what item is active/hover, consider saving a unique value of that Card
, so you can determine wich Card
is being hovered on.由于您希望App
知道哪些项目处于活动状态/悬停状态,请考虑保存该Card
的唯一值,以便您可以确定悬停在哪个Card
上。
Since I still know how the app works from your previous question , I would recommend to save the data.symbol
for the Card
you are hovering on.由于我仍然从您之前的问题中知道该应用程序的工作原理,因此我建议为您悬停的Card
保存data.symbol
。
First, onHover, remember the current data.symbol
一、onHover,记住当前的data.symbol
<Card
onMouseOver={() => setState({ actionButton: data.symbol })}
onMouseOut={() => setState({ actionButton: null })}
>
The, while looping over all the Cards, you can check if the curent one needs an icon like so:在遍历所有卡片时,您可以检查当前卡片是否需要这样的图标:
{state && state.actionButton === data.symbol && (
<Fab>
<EmojiEmotionsIcon />
</Fab>
)}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.