在 link 单击时调用 react-modal

Question

使用 react-modal，需要通过锚标记或 react-router-dom Link

在点击超链接时显示模式

示例：单击注册超链接，注册表单模式应打开

handleClick() =>{
 <ReactModal/>
}
<table>
<tr>
<td>
<a href='' onclick='handleClick()'>check</>
</td>
</tr>
</table>

有办法吗？

Answer 1

您可以为 link 定义 onClick 事件处理程序。在处理程序上，您可以使用 preventDefault 停止导航到 linked url。请检查以下示例。

const [modalVisible, setModalVisible] = useState(false);

<a
  href="https://github.com"
  onClick={(event) => {
    event.preventDefault();
    setModalVisible(true);
  }}
>
  Github
</a>

<Modal
  isOpen={modalVisible}
>
  ...
</Modal>

react-modal invoke on link click