react JS에서 버튼 누름으로 링크 클릭을 호출하려면 어떻게 해야 합니까?

react JS에서 버튼 누름으로 링크 클릭을 호출하려면 어떻게 해야 합니까?

단추가 있어요.사용자가 눌렀을 때 특정 링크를 눌렀을 때와 같은 결과가 나왔으면 합니다.

바꿔 말하면, 링크를 버튼으로 표현하고 싶습니다.

이를 통해 Jquery를 사용할 수 있음을 알 수 있습니다.버튼 클릭 이벤트로 href를 호출하는 방법

ReactJS에서 이를 "올바른" 방법은 무엇입니까?

다음과 같이 합니다.

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

Anchor 태그 대신 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--

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>

물론, 리액트에 저장 가능합니다.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>
    )
}

이것은 나에게 효과가 있었다:)

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

2021 업데이트:

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

다음의 코드를 사용할 수 있습니다.

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

useNavigate 훅은 특정 링크로 이동할 수 있는 기능을 반환합니다.

언급URL : https://stackoverflow.com/questions/41080481/in-reactjs-how-to-invoke-link-click-via-button-press