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

Question

单击按钮没有任何作用。

我尝试将<a href={news.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>)
}

重要-由于安全原因，当目标设置为rel="noopener noreferrer"时，应添加_blank。 -请参阅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>
)