如何在新页面和窗口中获取onclick事件渲染的结果

Question

我试图在新的页面和窗口中获得onClick事件渲染的结果。我有几个问题。

我尝试在window.open函数中包装我的Pdfs组件的渲染。这太简单了，根本不起作用。我尝试将history所需的状态添加到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>

)

单击表格行后，这是pdfs中道具的控制台日志...

   {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页面也可以在一个单独的窗口中打开。允许“/”页面保持不变。我尝试将target =“_ blank”添加到被单击的行中。

Answer 1

支柱pdfs在props.location.state.pdfs内部退出。要么在Pdfs组件中用props.pdfs.map替换props.location.state.pdfs，要么只将pdfs作为prop传递给Pdfs组件