如何在单击反应中的按钮时在新选项卡中打开页面？我也想向该页面发送一些数据

Posted 2023-02-21

【中文标题】如何在单击反应中的按钮时在新选项卡中打开页面？我也想向该页面发送一些数据

【英文标题】：How to open a page in new tab on click of a button in react? I want to send some data to that page also

【发布时间】：2018-05-04 12:26:02

【问题描述】：

我正在开发发票页面，在该页面中，用户可以通过单击按钮来开具发票，我会调用 api 调用，在得到响应后我想将一些数据发送到 页面(RaisedInvoice.jsx) 应该在 新标签页 中打开，我该怎么做。我没有得到的是如何通过单击 ReactJs 中的按钮在新选项卡中打开页面。

RaiseInvoice.jsx：

import React from 'react';
import Links from './Links.jsx';
import history from './history.jsx';

import axios from 'axios';

class RaiseInvoice extends React.Component 
    
    constructor(props) 
        super(props);

        // This binding is necessary to make `this` work in the callback
        this.state = projects: [], searchParam : '';
        this.raiseInvoiceClicked = this.raiseInvoiceClicked.bind(this);
    
    
    raiseInvoiceClicked()
        // here i wish to write the code for opening the page in new tab.
    
    
    render() 
      return (
         <div>
              <Links activeTabName="tab2"></Links>
              <div className="container">
                  <div className = "row col-md-4">
                      <h1>Raise Invoice...</h1>
                  </div>
                  <div className = "row col-md-4"></div>
                  <div className = "row col-md-4" style ="marginTop":"24px">
                      <button type="button" className="btn btn-default pull-right" onClick=this.raiseInvoiceClicked>Raise Invoice</button>
                  </div>
                  
              </div>
         </div>
      )
    


export default RaiseInvoice;

【问题讨论】：

你用的是哪个版本的 react-router？

什么样的数据？

"react-router": "^4.1.2" @jayabalaji j

我必须发送一个数据数组才能在表格中显示它们，以及一些其他细节，如地址标题等.....

【参考方案1】：

由于您要发送大数据，因此将它们附加到您的目标 URL 看起来很糟糕。为此，我建议您使用“LocalStorage”。所以你的代码看起来像这样，

raiseInvoiceClicked()
   // your axios call here
   localStorage.setItem("pageData", "Data Retrieved from axios request")
   // route to new page by changing window.location
   window.open(newPageUrl, "_blank") //to open new page

在您的 RaisedInvoice.jsx 中，像这样从本地存储中检索数据，

componentWillMount() 
  localStorage.pagedata= "your Data";
  // set the data in state and use it through the component
  localStorage.removeItem("pagedata");
  // removing the data from localStorage.  Since if user clicks for another invoice it overrides this data

【讨论】：

只有在链接不指向其他站点时才有效

我收到此错误： 标签上的未知道具参数。从元素中移除这个道具。 @jayabalaji j

你能解释我在哪里以及如何使用这个#？？

我已经使用本地存储更新了代码..请检查

【参考方案2】：

你可以只使用普通的 JS 来做这件事，并用它附加一些查询边界

raiseInvoiceClicked()
    const url = 'somesite.com?data=yourDataToSend';
    window.open(url, '_blank');

【讨论】：

我曾经这样做过：history.push( pathname: '/editProject', state: projectData : projectData ) 但有什么方法可以在新标签页中打开... ?

如果它在同一个域中使用@Jayabalaji J 答案，如果它在另一个域中，那么你没有很多选项来传递数据。 url 参数是唯一的方法

如何从新打开的react组件中的url访问数据？？ @乔伊

这里有一篇文章，它为您提供了一种从 URL 中提取参数的辅助方法。 ***.com/questions/901115/…

【参考方案3】：

在onclick方法中不要调用raiseInvoiceClicked()函数，你可以试试

onClick="window.open('your_url')"

在您的代码中。

【讨论】：

它不起作用，我认为它会给你分配字符串到事件中的错误

【参考方案4】：

为什么不用 props 传递这些数据？

...

const href = '...url_to_redirect...';
const data_to_send = 'someTestData';
const api_href = `example.com/api/?$data_to_send`;

export const DictDefaultOptions = ( url:api_href, method='GET') => 
    return 
        url,
        method,
        mode : 'cors' ,
        headers : 
            'Access-Control-Allow-Origin':'*'
        
    ;
;

const sentData =  method:defaultOptions.method, mode: defaultOptions.mode ;

send_data_to_api = () => 
    const api_return = await fetch(api_href, sentData)
    .then(response => response.json()).
    then(responseText => 
        data = (JSON.parse(JSON.stringify(responseText)))
    ) .catch(error => 
         console.log([requestURL] : error);
    );

    do  await this.wait(100)  while(Object.keys(api_return).length <= 0);
    if (Object.keys(api_return).length > 0) 
        return window.open(href, "_blank");
    
;

【讨论】：

伙计，我认为这是最好和最完整的方式...编辑器使代码不太好理解，但我不喜欢那样...给这段代码一个小礼物.. . React APP JS

【参考方案5】：

您可以使用以下代码在新窗口中打开它。

请注意，对于道具，您可以传递应在新窗口中呈现的任何子组件。

const RenderInWindow = (props) => 
  const [container, setContainer] = useState(null);
  const newWindow = useRef(null);
useEffect(() => 
    // Create container element on client-side
    setContainer(document.createElement("div"));
  , []);

  useEffect(() => 
    // When container is ready
    if (container) 
      // Create window
      newWindow.current = window.open(
        "",
        "",
        "width=600,height=400,left=200,top=200"
      );
      // Append container
      newWindow.current.document.body.appendChild(container);

      // Save reference to window for cleanup
      const curWindow = newWindow.current;

      // Return cleanup function
      return () => curWindow.close();
    
  , [container]);

  return container && createPortal(props.children, container);
;