我正在做一个提高发票页面,用户可以点击一个按钮提高发票,我会调用一个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;
6条答案
按热度按时间kr98yfug1#
既然你要发送大数据,把它们附加到你的目标URL看起来很破旧。我建议你使用“LocalStorage”来实现这个目的。所以你的代码看起来像这样,
在RaisedInvoice.jsx中,从本地存储中检索数据,如下所示,
rsl1atfo2#
您可以只使用普通的JS来完成它,然后用它附加一些查询参数
ifmq2ha23#
除了在onclick方法中调用raiseInvoiceClicked()函数之外,您还可以尝试
在您的代码中。
vngu2lb84#
简单地做到这一点!
mmvthczy5#
您可以使用以下代码在新窗口中打开它。
请注意,对于props,您可以传递任何应在新窗口中呈现的子组件。
yacmzcpb6#
使用 prop 传递此数据: