在模态框内单击删除按钮后，使父 div 聚焦答案

【问题标题】：make a parent div focused once a delete button was clicked inside a modal在模态框内单击删除按钮后，使父 div 聚焦
【发布时间】：2022-06-10 18:07:24
【问题描述】：

我有一个报价列表，单击弹出框时可以删除每个报价。如果用户单击弹出窗口中的删除选项，则会在所有内容的顶部打开一个模式，让用户确认删除，但没有视觉反馈关于正在删除哪个报价（在许多报价中）。

当用户在模式中单击删除时，我希望父级有一个边框。我尝试过关注内部，但是当 modal 打开时它不起作用，可能是因为 modal 实际上是一个 React Portal。

有什么想法可以实现我想要的吗？

【问题讨论】：

标签： javascript css reactjs focus ref

【解决方案1】：

如果您映射这些组件，则在父类中添加一个状态并检查当前 id 是否与您单击该按钮 id 相同，然后添加焦点类样式，否则正常

<div tabIndex="0" className={`relative Parent ${item.id == currentOpenId ? "focusStyle" : null}`}>
  <div className="sofOverview">
    <Component />  // returns the code below
</div>

预期的。

【讨论】：

是的，我一直在寻找一种 css 方式来实现它，太专注于它以至于我忘记了它可以用 js 来完成。谢谢！

【解决方案2】：

你为什么不做一件事，当你点击弹出框中的删除选项打开一个新的模态进行确认时，添加一个边框或任何视觉指示器 您想要拥有该弹出框的父 div。因为在点击弹出窗口中的删除选项时，您就知道打开了弹出窗口的报价是什么。为什么要在打开确认模式并单击模式中的删除按钮时将指示器添加到父级，因为无论如何单击删除按钮后，您的报价都将被删除。因此，在弹出框级别添加指标就可以了。

【讨论】：