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

ibrsph3r  于 2022-12-26  发布在  React
关注(0)|答案(7)|浏览(175)

我有一个按钮。当用户按下它时,我希望结果与用户按下特定链接时的结果相同。
换句话说,我想把一个链接表示为一个按钮。
从这里我可以看出使用Jquery是可能的:How to call a href by onclick event of a button?
在ReactJS中,“正确”的方法是什么?

kokeuurv

kokeuurv1#

就像这样:

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

rta7y2nd2#

使用React-Router Link代替标记。

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--
e4eetjau

e4eetjau3#

您甚至不需要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>
    )
}
r1zk6ea1

r1zk6ea14#

这对我很有效:)
第一个月

wn9m85ua

wn9m85ua5#

2021年更新:

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

tct7dpnv6#

您可以使用以下代码:

import { useNavigate } from "react-router-dom";
    const handleClick = (url)=>{
       const navigate = useNavigate(); 
       navigate(url);
     }

useNavigate***挂钩返回一个函数,用于导航到特定链接

unguejic

unguejic7#

使用window.open()方法在单击按钮时打开链接。

function App() {
  return (
    <button
      type="button"
      onClick={() => {
        window.open("http://google.com", "_blank");
      }}>
      Search
    </button>
  )
}

相关问题