如何从新页面中的 onclick 事件渲染和 window 反应中获取结果
How can I get the results from a onclick event render in a new page and window in react
我正在尝试在新页面中呈现 onClick 事件的结果 window。我有几个问题。
我尝试将 Pdfs 组件的渲染包装在 window.open 函数中。这太容易了,根本行不通。
我尝试将我需要的状态添加到 history.push 函数
handleContract = (id) => {
API.openRow(id)
.then(res => {
const pdfs = res.data;
this.setState({pdfs});
this.props.history.push({
pathname: '/pdf',
state: { labels:this.state.labels,
contracts:this.state.contracts,
pdfs:this.state.pdfs }
})
})
.catch(err => console.log(err));
}
我无法读取 /pdf 页面上未定义的 属性 'map'
这是子组件中发生 OnClick 事件的地方,包含 /pdf 页面所需的数据。
const SearchResults = props => (
<tbody>
{ props.contracts.map((contract, i) => (
<tr key={i} data-id={contract.Id}
onClick={() => {props.handleContract(contract.Fields.filter(field => field.DataField==="IDXT001").map(field => field.DataValue))}}
className="clickable-row"
target="_blank">{contract.Fields.map( docs =>
<td key={docs.Id}><span id={docs.DataField}>{docs.DataValue}</span></td>)}
</tr>))}
</tbody>
)
在父页面上..
class SearchPage extends React.Component {
constructor(props) {
super(props);
this.state = {
labels: [],
contracts: [],
formValues:"",
pdfs:[],
id:"",
};
this.onClick = this.handleContract.bind(this);
}
<SearchResults
labels={this.state.labels}
contracts={this.state.contracts}
pdfs={this.state.pdfs}
handleContract={this.onClick}
/>
我的app.js文件
<BrowserRouter>
<div>
<Header />
<Route exact path="/" component={Search} />
<Route exact path='/pdf' component={Pdf} />
<Footer />
</div>
</BrowserRouter>
还有我的 Pdf 组件..
const Pdfs = props => (
<div className="container">
<div className="row">
{props.pdfs.map(contract =>
<div className="col-sm-4" key={contract.Id}>
<div className="card scroll">
<div className="card-body">
<p><i className="fas fa-file-pdf fa-lg"></i> <a href=
{"http://api/document/" + contract.DocImage.sfScanIndex}
className="link"
target="_blank"
rel="noopener noreferrer"
>{contract.DocImage.sfFilename}</a></p>
<p>{contract.Fields.map(docs =>
<div><h6 className="card-title">{docs.DisplayName}:</h6>
<p className="card-text">{docs.DataValue}</p>
<hr/>
</div>)}
</p>
</div>
</div>
</div>)}
</div>
)
这是我单击表格行后 pdf 中道具的控制台日志...
{match: {…}, location: {…}, history: {…}, staticContext: undefined}
history: {length: 36, action: "PUSH", location: {…}, createHref: ƒ, push: ƒ, …}
location:
hash: ""
key: "f8b43j"
pathname: "/pdf"
search: ""
state:
contracts: [{…}]
labels: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
pdfs: Array(7)
0: {Id: 0, Fields: Array(12), DocImage: {…}}
1: {Id: 1, Fields: Array(12), DocImage: {…}}
2: {Id: 2, Fields: Array(12), DocImage: {…}}
3: {Id: 3, Fields: Array(12), DocImage: {…}}
4: {Id: 4, Fields: Array(12), DocImage: {…}}
5: {Id: 5, Fields: Array(12), DocImage: {…}}
6: {Id: 6, Fields: Array(12), DocImage: {…}}
length: 7
__proto__: Array(0)
__proto__: Object
__proto__: Object
match: {path: "/pdf", url: "/pdf", isExact: true, params: {…}}
staticContext: undefined
__proto__: Object
我希望 /pdf 页面也能在单独的 window 中打开。让“/”页面保持不变。我尝试将 target="_blank" 添加到被点击的行。
道具 pdfs
退出 props.location.state.pdfs
。将 Pdfs 组件中的 props.pdfs.map
替换为 props.location.state.pdfs
或提取仅将 pdf 作为 prop 传递给 Pdfs 组件
我正在尝试在新页面中呈现 onClick 事件的结果 window。我有几个问题。
我尝试将 Pdfs 组件的渲染包装在 window.open 函数中。这太容易了,根本行不通。 我尝试将我需要的状态添加到 history.push 函数
handleContract = (id) => {
API.openRow(id)
.then(res => {
const pdfs = res.data;
this.setState({pdfs});
this.props.history.push({
pathname: '/pdf',
state: { labels:this.state.labels,
contracts:this.state.contracts,
pdfs:this.state.pdfs }
})
})
.catch(err => console.log(err));
}
我无法读取 /pdf 页面上未定义的 属性 'map'
这是子组件中发生 OnClick 事件的地方,包含 /pdf 页面所需的数据。
const SearchResults = props => (
<tbody>
{ props.contracts.map((contract, i) => (
<tr key={i} data-id={contract.Id}
onClick={() => {props.handleContract(contract.Fields.filter(field => field.DataField==="IDXT001").map(field => field.DataValue))}}
className="clickable-row"
target="_blank">{contract.Fields.map( docs =>
<td key={docs.Id}><span id={docs.DataField}>{docs.DataValue}</span></td>)}
</tr>))}
</tbody>
)
在父页面上..
class SearchPage extends React.Component {
constructor(props) {
super(props);
this.state = {
labels: [],
contracts: [],
formValues:"",
pdfs:[],
id:"",
};
this.onClick = this.handleContract.bind(this);
}
<SearchResults
labels={this.state.labels}
contracts={this.state.contracts}
pdfs={this.state.pdfs}
handleContract={this.onClick}
/>
我的app.js文件
<BrowserRouter>
<div>
<Header />
<Route exact path="/" component={Search} />
<Route exact path='/pdf' component={Pdf} />
<Footer />
</div>
</BrowserRouter>
还有我的 Pdf 组件..
const Pdfs = props => (
<div className="container">
<div className="row">
{props.pdfs.map(contract =>
<div className="col-sm-4" key={contract.Id}>
<div className="card scroll">
<div className="card-body">
<p><i className="fas fa-file-pdf fa-lg"></i> <a href=
{"http://api/document/" + contract.DocImage.sfScanIndex}
className="link"
target="_blank"
rel="noopener noreferrer"
>{contract.DocImage.sfFilename}</a></p>
<p>{contract.Fields.map(docs =>
<div><h6 className="card-title">{docs.DisplayName}:</h6>
<p className="card-text">{docs.DataValue}</p>
<hr/>
</div>)}
</p>
</div>
</div>
</div>)}
</div>
)
这是我单击表格行后 pdf 中道具的控制台日志...
{match: {…}, location: {…}, history: {…}, staticContext: undefined}
history: {length: 36, action: "PUSH", location: {…}, createHref: ƒ, push: ƒ, …}
location:
hash: ""
key: "f8b43j"
pathname: "/pdf"
search: ""
state:
contracts: [{…}]
labels: (6) [{…}, {…}, {…}, {…}, {…}, {…}]
pdfs: Array(7)
0: {Id: 0, Fields: Array(12), DocImage: {…}}
1: {Id: 1, Fields: Array(12), DocImage: {…}}
2: {Id: 2, Fields: Array(12), DocImage: {…}}
3: {Id: 3, Fields: Array(12), DocImage: {…}}
4: {Id: 4, Fields: Array(12), DocImage: {…}}
5: {Id: 5, Fields: Array(12), DocImage: {…}}
6: {Id: 6, Fields: Array(12), DocImage: {…}}
length: 7
__proto__: Array(0)
__proto__: Object
__proto__: Object
match: {path: "/pdf", url: "/pdf", isExact: true, params: {…}}
staticContext: undefined
__proto__: Object
我希望 /pdf 页面也能在单独的 window 中打开。让“/”页面保持不变。我尝试将 target="_blank" 添加到被点击的行。
道具 pdfs
退出 props.location.state.pdfs
。将 Pdfs 组件中的 props.pdfs.map
替换为 props.location.state.pdfs
或提取仅将 pdf 作为 prop 传递给 Pdfs 组件