Как получить результаты рендеринга события onclick на новой странице и в окне реакции? - PullRequest
Новая
       21

Как получить результаты рендеринга события onclick на новой странице и в окне реакции?

0 голосов
/ 26 марта 2019

Я пытаюсь отобразить результаты события onClick на новой странице и в окне.У меня есть пара вопросов.

Я попытался обернуть рендеринг компонента 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));
}

У меня не получается прочитать свойство 'map' of undefined на странице / pdf

Вот где событие 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}
 />

Файл my 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" в строку, по которой щелкали.

1 Ответ

0 голосов
/ 26 марта 2019

Опора pdfs выходит внутрь props.location.state.pdfs. Либо замените props.pdfs.map на props.location.state.pdfs в компоненте Pdfs, либо извлеките передачу только pdfs как пропеллер компоненту Pdfs

...