在 React 中单击按钮在新选项卡中打开页面

作者

在 React 中单击按钮在新选项卡中打开页面

Open page in new tab on button click in React

要在 React 中单击按钮在新选项卡中打开页面：

  1. onClick向按钮添加道具。
  2. 单击按钮时，使用该window.open()方法加载资源。
  3. 调用方法时将target参数设置为。_blankopen()
应用程序.js
const App = () => {
  const openInNewTab = url => {
    window.open(url, '_blank', 'noopener,noreferrer');
  };

  return (
    <div>
      <button onClick={() => openInNewTab('https://google.com')}>
        Open google
      </button>
    </div>
  );
};

export default App;

对象上的open()
方法window将指定的资源加载到新的或现有的选项卡中。

我们将以下 3 个参数传递给该open()方法：

姓名 描述
url 要加载的资源的URL或路径
target 资源加载到的浏览上下文的名称。该_blank值表示资源已加载到新选项卡中。
windowFeatures 以逗号分隔的窗口功能列表。在示例中用于增加安全性。

当用户点击按钮时，我们传递给onClickprop 的函数将被调用，指定的页面将被加载到一个新的选项卡中。

请注意，我们将一个函数传递给onClickprop，而不是调用该函数的结果。

这非常重要，因为如果我们将调用函数的结果传递给onClickprop，该函数将在页面加载时立即被调用，用户的浏览器将打开新页面而无需等待点击事件。

通过设置target为_blank，我们在新选项卡中打开资源。

从技术上讲，用户可以将他们的浏览器配置为在设置为时在新窗口（而不是选项卡）中打开资源，target但_blank 这种情况很少见。

另一个target常用的选项是_self– 在当前浏览上下文中打开 URL。


您可以在 MDN 文档的这一部分查看所有可能的target选项
。

–

发表评论