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

Question

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

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

从中我可以看到使用Jquery的可能性： 如何通过按钮的onclick事件调用href？

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

Answer 1

像这样：

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

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

Answer 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>
    )
}

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

onClick(){
    window.location.href="http://url.com";
}
render(){
    return (
        <button id="bt" onClick={this.onClick}>Click</button>
    )
}