web-dev-qa-db-fra.com

Comment ouvrir une page dans un nouvel onglet en cliquant sur un bouton dans Rea, je veux envoyer des données à cette page aussi

Je travaille sur une page de facture à augmenter, dans laquelle l'utilisateur peut créer une facture en cliquant sur un bouton, j'appellerais un appel d'api et après avoir obtenu la réponse, je souhaite envoyer des données à un page (RaisedInvoice.jsx) qui devrait s'ouvrir dans un nouvel onglet, comment puis-je le faire. Ce que je ne comprends pas, c'est comment ouvrir une page dans un nouvel onglet en cliquant sur un bouton dans 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;
reactjsreact-router
10
Manikanta B

Puisque vous alliez envoyer des données volumineuses, les ajouter à votre URL cible a l'air minable. Je vous suggère d'utiliser "LocalStorage" à cette fin. Donc, votre code ressemble à ceci,

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
}

Dans votre RaisedInvoice.jsx, récupérez les données du stockage local comme ceci,

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
}
15
Jayabalaji J

Vous pouvez simplement utiliser JS pour le faire et y ajouter des périmètres de requête.

raiseInvoiceClicked(){
    const url = 'somesite.com?data=yourDataToSend';
    window.open(url, '_blank');
}
9
Joey
raiseInvoiceClicked(){
    const url = 'somesite.com?data=yourDataToSend';
    window.open(url, '_blank');
}

Je devais utiliser un? au lieu d'un & pour que cela fonctionne.

0
SrednaK