reactjs – 如何在单击按钮时在新选项卡中打开页面,我想将一些数

发布时间：2020-12-15 09:33:06 所属栏目：百科来源：网络整理

导读：我正在进行加薪发票页面,用户可以在点击按钮时提出发票,我会拨打api电话,在收到回复后我想将一些数据发送到页面(RaisedInvoice.jsx),这应该是在新标签中打开,我该怎么做.我没有得到的是如何在单击ReactJs中的按钮时在新选项卡中打开页面. RaiseInvoice.jsx：

我正在进行加薪发票页面,用户可以在点击按钮时提出发票,我会拨打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;

解决方法

由于您要发送大数据,将它们附加到目标网址看起来很破旧.我建议你为此目的使用’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
}

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!