Übergeben Sie den Verlauf als Requisiten an einen Event-Handler.

Question

Ich erstelle ein Formular, das nach dem Ausfüllen und Klicken auf die Schaltfläche Senden zu einer anderen Komponente navigieren soll. Allerdings kann ich nicht in der Lage sein, Geschichte als Requisite zu schreiben. Ich nehme an, dass ich mit den Bindungen etwas falsch mache, kann das aber nicht herausfinden. Vielen Dank.

Hier ist meine App.js

import React from 'react'; 
import {BrowserRouter, Route, Switch} from 'react-router-dom'; 
import {LandingPage} from './landingPage/LandingPage'; 
import {ReportsPage} from './reportsPage/ReportsPage'; 

export class App extends React.Component { 
    render() { 
    return (
     <BrowserRouter > 
     <Switch> 
      <Route path="/" exact component={LandingPage}/> 
      <Route path="/reports" 
      render={() => <ReportsPage/>} 
      /> 
     </Switch> 
     </BrowserRouter> 
    ); 
    } 
} 

Hier mein LandingPage.js ist

export class LandingPage extends React.Component { 
    constructor(props){ 
    super(props); 
    this.state = { 
    ... 
    this.formAnswersUpdater = this.formAnswersUpdater.bind(this) 
    } 

    formAnswersUpdater(e) { 
    e.preventDefault() 
    ... 
    history.push("/reports") 
    } 

    render() { 
    return (
     <div> 
     ... 
     <MyForm 
      onClickOnLastInputsForm={e => this.formAnswersUpdater} 
     /> 
     </div> 
    ) 
    } 

Und hier ist, wo mein Ereignis geschieht. MyForm.js

export class MyForm extends React.Component { 
render() { 
    return(
    ... 
    <Route render={({history}) => (
     <button className="uk-button uk-button-primary uk-width-1-1@s" 
       style={{backgroundColor:'#41f44f', 
         color:'#666', margin: 0}} 
       id='buttonSliders' 
       /*if done here it works*/ 
       /*onClick={() => {history.push("/reports")}}*/ 
       /*However if passed to the event handler it does not*/ 
       onClick={() => {this.props.onClickOnLastInputsForm}} 
     > 
     ClickMe! 
     </button> 
    )}/> 
) 

Mein reagieren-Router-dom Version ist: "^ 4.2.2"

Answer 1

Ok, hier ist, wie ich das Problem behandelt.

Anstatt die LandingPage-Komponente zu exportieren, habe ich sie mit der FunktionRouter eingepackt und dann exportiert.

Und dann in der MyForm-Komponente rief ich gerade den eventHandler.

export class MyForm extends React.Component { 
render() { 
    return(
    ... 
     <button className="uk-button uk-button-primary uk-width-1-1@s" 
       style={{backgroundColor:'#41f44f', 
         color:'#666', margin: 0}} 
       id='buttonSliders' 
       onClick={this.props.onClickOnLastInputsForm()} 
     > 
     ClickMe! 
     </button> 
) 

Answer 2

Ich weiß nicht, ob dies alle Ihre Probleme lösen, aber ich sehe etwas Wichtiges fehlt in Ihre LandingPage render-Funktion

onClickOnLastInputsForm={e => this.formAnswersUpdater} 

Sie vergessen haben, in Ihrem Argument übergeben: e

onClickOnLastInputsForm={e => this.formAnswersUpdater(e)} 

Stellen Sie sicher, dass Sie dies auch unter MyForm hinzufügen. Du hast es dort auch vergessen. Haben Sie weitere Fehler, nachdem Sie diese behoben haben?

edit: Nach ein paar Inspektionen der Dokumente sieht es so aus, als ob die typische Verwendung von react-router-dom ein anderes Muster hat als das, was Sie haben. Das gebräuchlichste Muster bei der Routenbehandlung besteht darin, dass Sie einen Stammsatz von Routen haben und Link aus dem npm-Paket verwenden, um zu navigieren. Ich sehe die Historie und ihre Derivate nur in der Dokumentation für react-router. Ich bin mir bewusst, dass react-router-dom ist eine Ableitung von react-router, aber ich denke, wenn Sie die normalen Muster für React folgen, wird es viel einfacher für Sie in der Zukunft, wenn Sie Debuggen.

Ein schöner Artikel darüber. Es hat sogar eine Beispiel-App mit es: https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf