在 reactJS 中，如何通过按下按钮来调用链接点击？

Posted 2023-02-22

【中文标题】在 reactJS 中，如何通过按下按钮来调用链接点击？

【英文标题】：In reactJS, how to invoke link click via button press?

【发布时间】：2017-04-26 02:47:41

【问题描述】：

我有一个按钮。当用户按下它时，我希望结果与用户按下特定链接时的结果不同。

换句话说，我想将链接表示为按钮。

从这里我可以看出使用 Jquery 是可能的： How to call a href by onclick event of a button?

在 ReactJS 中执行此操作的“正确”方法是什么？

【问题讨论】：

您可以使用样式锚 () 标签并以 href 形式提供链接。不需要 ReactJS 来处理它。

使用 CSS 将链接样式设置为按钮。或者使用 Bootstrap

【参考方案1】：

像这样：

<button
    type="button"
    onClick=(e) => 
      e.preventDefault();
      window.location.href='http://google.com';
      
> Click here</button>

【讨论】：

有必要加e.preventDefault()吗？没有它也可以正常工作。能说说目的吗？

我们还能使用这种方法并定位一个新标签吗？

是的，您可以使用 window.location.href 代替 window.open("http://google.com", "_blank");

【参考方案2】：

使用React-Router Link，而不是Anchor标签。

import React,  Component  from 'react';
import Link from 'react-router-dom'
 // reactClass --
    return (
      <div>
      <Link to='https://react.semantic-ui.com/'>
      <button type="button" className="btn btn-info">Button</button>
      </Link>
      </div>
    );
  // end--

【讨论】：

"未捕获的错误：您不应在 之外使用 "

每当您尝试在 BrowserRouter 之外的页面上显示链接时，您都会收到该错误。这个错误消息本质上是说任何不是我们的 子组件的组件都不能包含任何与 React Router 相关的组件。您需要迁移组件层次结构。

这不是打开一个新标签，也不是覆盖地址栏上显示的实际链接。

在这种情况下，经典的 react.semantic-ui.com" target="_blank"> 将起作用。所以要解决您想要实现的目标，最简单的方法是添加一个 在你的 .

嵌套 <a> 和 <button> 是无效的 html。见validation error

【参考方案3】：

你甚至不需要 jQuery 或 React 来做到这一点。就这么简单：

var ex = document.getElementById('ex');
ex.onclick = function()
  console.log('clicked');


var bt = document.getElementById('bt');
bt.onclick = function()
  ex.click();

<button id="bt">Click</button>
<a id="ex">Triggerable link</a>

当然，在 React 中你可以存储组件的ref，绑定到事件，然后像这样触发事件：

onClick()
    this.ex.click();

render()
    return (
        <div>
          <button id="bt" onClick=this.onClick.bind(this) ref=(ref)=>this.bt = ref>Click</button>
          <a id="ex" onClick=()=>console.log("clicked") ref=(ref)=>this.ex = ref>Triggerable link</a>
        </div>
    )

编辑：如果您只想要一个类似于链接的按钮，您可以使用此按钮，或in this question 列出的任何解决方案：

onClick()
    window.location.href="http://url.com";

render()
    return (
        <button id="bt" onClick=this.onClick>Click</button>
    )

【讨论】：

你的 ReactJS 解决方案可以没有单独的链接吗？我只想要一个按钮，其结果与单击链接相同，但没有链接。

完成。请问为什么你需要它作为一个按钮？

在“当然，在 React 中你可以......”下的示例代码中使用 和 标签时，我得到“相邻的 JSX 元素必须被包裹在一个封闭标签中”

@DarylSpitzer 我的错误，感谢您指出。我将组件包装在 <div> 中。

我会在这里改变一件事。我会在refexample 中的<a> 标签中添加display: "none" 样式

【参考方案4】：

这对我有用:)

<a target="_blank" href="http://google.com"> <button id="bt" >Click</button> </a>

【讨论】：

您的答案可以通过额外的支持信息得到改进。请edit 添加更多详细信息，例如引用或文档，以便其他人可以确认您的答案是正确的。你可以找到更多关于如何写好答案的信息in the help center。

【参考方案5】：

2021 年更新：

<div
    style=
      width: 15,
      height: 15,
      background: "blue",
      cursor: "pointer",
    
    onClick=() => 
      window.open("http://google.com", "_blank");
    
  />