代码之家 › 专栏 › 技术社区 › sumanth

链接点击时响应模态调用

react-modal react-router-dom hyperlink reactjs javascript

-1

sumanth · 技术社区 · 4 年前

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

示例:点击注册超链接,注册表单模式应打开

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

有办法吗?

1 回复 | 直到 4 年前

baymax 4 年前

您可以定义 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>

推荐文章

Softly · 单选按钮未按预期取值

1 年前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

1 年前

SlickRed · 我无法使用JS关注HTML元素

1 年前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

1 年前

assembler · Nextjs没有处理发布请求

1 年前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

1 年前

BADRUM · 执行两个获取功能后,如何导航回页面?

1 年前

Toniq · javascript为php保存多维数组

1 年前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

1 年前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

1 年前