ReactJS 引导按钮作为链接新选项卡

如何解决ReactJS 引导按钮作为链接新选项卡

我调查了很多关于使用按钮作为链接的主题，但没有找到适合我的解决方案 - 我需要使用 React 引导程序按钮在新选项卡中打开某个页面。

<Button onClick={() => onClickOpenVacancy(id)}>

React bootstrap offers a prop 'href' 但没有关于如何在新标签页中打开的信息。请问有什么建议吗？

解决方法

您应该同时使用 href 和 target：

<Button href="URL" target="_blank" onClick={() => onClickOpenVacancy(id)}>

看起来他们只是让 target 类型为 any 而没有进一步的文档。它的工作原理与通常的 <a> 标记上存在的属性相同。

,

你可以在锚标签内添加按钮

 <a href='https://example.com/' target="_blank">
        <button className="test" onClick={() => onClickOpenVacancy(id)}>
            Click Here
        </button>
 </a>

或

   <button className="test" 
       onClick="window.location.href = 'https://example.com" target="_blank">
        Click Here
    </button>

或者..对你来说并不是真的需要

<form action="https://example.com/" target="_blank">
        <button className="test" type="submit" onClick={}> // onClick not needed
            Click Here
        </button>
    </form>

如果 onClickOpenVacancy 是用来做重定向的，那么你就不需要 onClick 函数了。 href 和目标就足够了。

,

在此代码片段中传入完整的 URL，它应该可以工作

input {
  http {
    port => "9090"
    codec => "json"
  }
}

output {
  # Debugging output
  stdout { codec => rubydebug { metadata => true } }

  # Only push for below events
  if [doc_type] in ["commits","pull_requests","pull_request_reviews","issues","forks"] {
    elasticsearch {
      index => "devops-github"
      hosts => ["${ELASTIC_URL}"]
      document_id => "%{doc_id}" # Adding document_id (_id) to overwrite duplicates

      user => "${ELASTIC_USERNAME:}"
      password => "${ELASTIC_PASSWORD:}"

      ssl => "${ELASTIC_SSL:true}"
      cacert => '${ELASTIC_CA_CERT:/etc/pki/ca-trust/source/anchors/ca_bundle.pem}'
    }
  }
}

它与 bootstrap 等库无关