链接点击时的反应模式调用答案

【问题标题】：react-modal invoke on link click链接点击时的反应模式调用
【发布时间】：2020-11-18 02:15:38
【问题描述】：

使用react-modal，需要通过锚标签或react-router-dom链接在点击超链接时显示模态

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

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

有没有办法做到这一点？

【问题讨论】：

【解决方案1】：

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

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

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

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

【讨论】：