修复Mui呈现的条件状态行为

Question

我有一张Mui卡的清单。在卡悬停时，我希望一个浮动的动作按钮出现在卡内。我使用状态来实现这一点，问题是在状态改变期间悬停状态被应用于所有卡，这意味着按钮出现在每张卡上，而不是被指向/悬停的那张。我怎样才能控制这个按钮只显示在状态动作被触发的卡片上。

    const [state, setState] = useState({
        actionButton: false
    });

                        <Card
                          className="miniGraphCards"
                          onMouseOver={() => setState({ actionButton: true })}
                          onMouseOut={() => setState({ actionButton: false })}
                        >

                            {state && state.actionButton != false &&
                              <Fab>
                                <EmojiEmotionsIcon />
                              </Fab>}

请参阅可复制代码：您将注意到图形的重复重新渲染和按钮被应用于悬停时的所有卡片。

https://codesandbox.io/s/ellastic-kowalevski-j3wjx

Answer 1

您正在保存app组件上的“状态”。您的布尔ActionButton将触发所有项。

因为您希望应用程序知道哪些项处于活动状态/悬停状态，所以可以考虑保存该卡的唯一值，这样您就可以确定卡是否处于悬停状态。

由于我从您前面的问题中仍然知道该应用程序是如何工作的，我建议为您悬停的卡保存data.symbol。

<Card
    onMouseOver={() => setState({ actionButton: data.symbol })}
    onMouseOut={() => setState({ actionButton: null })}
>

在遍历所有卡片时，您可以检查curent是否需要如下图标：

{state && state.actionButton === data.symbol && (
    <Fab>
        <EmojiEmotionsIcon />
    </Fab>
)}

更新沙箱