在反应中创建一个按钮，单击该按钮会打开一个网页

Question

点击按钮什么都不做。

我尝试将<a href={news.url}> 传递到我用来生成按钮的函数中。目前，代码显示按钮上的链接，但我对如何使用提供的 Url 打开新选项卡感到困惑。我听过很多人在谈论路由器，但在我看来，为什么我必须将它用于这么简单的事情。像往常一样，我想太多这些事情。 数据是从另一个文件中的对象引入的。

import React from 'react';
import PropTypes from 'prop-types';
import './index.css';
import FileName from './filename';
import Subtitle from './subtitle';

const ListItem  = ({news}) => ( 

    <tr className="list-item">
        <td><FileName news={news} /> <a href={news.url}>{news.url}</a></td>
        <HandleClick openUrl={news.url} passLink={<a href={news.url}>{news.url}</a>}/>
        <span className="website"></span>
        <td><Subtitle news={news}/> </td>
    </tr>
)

 function HandleClick (props)  {
    return(
    <button onClick={props.passLink}>{props.openUrl} </button>
    )
}

export default ListItem

我希望该按钮在浏览器中打开一个新标签，该标签使用我随道具提供的链接。按钮什么都不做。

Answer 1

对于按钮，您需要使用window.open 显式打开一个窗口。

参考-Open button in new window?

因此，您可以采用两种方法，而不是嵌入 <a href={news.url}>{news.url}</a>，这只会呈现锚点但不会打开新窗口。

1 使用window.open 打开窗口。

function HandleClick (props)  {
  return (<button onClick={() => window.open(props.openUrl)}>{props.openUrl} </button>)
}

2 或者使用锚点，但将其设置为按钮。

Bootstrap 和其他 CSS 框架可让您将锚定样式设置为按钮（btn btn-primary 等）。

function HandleClick (props)  {
  return (<a href={props.openUrl} target="_blank" rel="noopener noreferrer">{props.openUrl}</a>)
}

重要提示 - 当您的目标设置为 _blank 时，出于安全原因，您应该添加 rel="noopener noreferrer"。 - 参考https://www.jitbit.com/alexblog/256-targetblank---the-most-underestimated-vulnerability-ever/

Answer 2

要打开一个新窗口或标签，您可以在按钮的 onClick 处理程序中使用 window.open(...) 函数。

const ListItem = ({ news }) => (

  <tr className="list-item">
    <td><FileName news={news} /> <a href={news.url}>{news.url}</a></td>
    <button onClick={() => {
      window.open(
        news.url,
        '_blank' // <- opens the link in a new tab or window.
      );
    }} >{news.url}</button>
    <span className="website"></span>
    <td><Subtitle news={news} /> </td>
  </tr>
)