Reactjs 将历史作为道具传递给事件处理程序

我正在创建一个表单，填写完毕并单击提交按钮后，该表单应导航到另一个组件。然而，我似乎不能把历史当作道具来传递。我想我做了一些错误的绑定这个，但不能找出这个。谢谢

这是我的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>
    );
  }
}

从“React”导入React；
从“react router dom”导入{BrowserRouter，Route，Switch}；
从“./LandingPage/LandingPage”导入{LandingPage}；
从“./ReportsPage/ReportsPage”导入{ReportsPage}；
导出类应用程序扩展React.Component{
render（）{
返回(
} 
/>
);
}
}

这是我的登陆页面

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>
     )
   }

导出类登录页扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
...
this.formAnswersUpdater=this.formAnswersUpdater.bind（this）
}
首席检察官（e）{
e、 预防默认值（）
...
history.push（“/reports”）
}
render（）{
返回(
...
这是formAnswersUpdater}
/>
)
}

这里是我的事件发生的地方。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>
    )}/>
  )

导出类MyForm扩展React.Component{
render（）{
返回(
...
(
{history.push（“/reports”）}*/
/*但是，如果传递给事件处理程序，则不会*/
onClick={（）=>{this.props.onclickonlastingputsform}
>
点击我！
)}/>
)

---

我的react router dom版本是：“^4.2.2”

我不知道这是否能解决您的所有问题，但我发现您的

登录页

呈现功能中缺少一些重要的功能

onClickOnLastInputsForm={e => this.formAnswersUpdater}

您忘了输入参数：

e

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

请确保您也在

MyForm

中添加了此项。您也忘在那里了。在修复这些错误后，您是否还会遇到其他错误

编辑：在对文档进行了一些检查之后，看起来

react路由器dom的典型用法与您使用的模式不同。路由处理的最常见模式是拥有路由的根集，并使用npm包中的
Link
进行导航。我只在
react的文档中看到历史记录及其衍生工具-路由器
。我知道，
react-router-dom
是
react-router
的衍生产品，但我认为如果您遵循react的正常模式，将来调试时会容易得多

这是一篇很好的文章。它甚至有一个使用它的示例应用程序：
好的，下面是我如何处理这个问题的

我没有导出LandingPage组件，而是使用Router函数将其包装，然后将其导出

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

  formAnswersUpdater(e) {
    e.preventDefault()
    ...
    //added this.props. here
    this.props.history.push("/reports")
  }



render() {
    return (
      <div>
        ...
        <MyForm
          onClickOnLastInputsForm={e => this.formAnswersUpdater}
        />
      </div>
     )
}
// wrapped it with withRouter
export default withRouter(LandingPage)

类登录页扩展React.Component{
建造师（道具）{
超级（道具）；
此.state={
...
this.formAnswersUpdater=this.formAnswersUpdater.bind（this）
}
首席检察官（e）{
e、 预防默认值（）
...
//添加了这个。道具。这里
this.props.history.push（“/reports”）
}
render（）{
返回(
...
这是formAnswersUpdater}
/>
)
}
//用路由器把它包起来
使用路由器导出默认值（登录页）

然后在MyForm组件中，我刚刚调用了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>
  )

导出类MyForm扩展React.Component{
render（）{
返回(
...
点击我！
)
this.formAnswersUpdater在推送到历史记录之前实际上做了几件事，我尝试了window.log，如果我没有推送到历史记录，它们都可以工作（包括查看事件对象）。因此事件被转移。此外，我还尝试了e=>this.formAnswersUpdater（e）；e=>this.formAnswersUpdater（）；和{this.formAnswersUpdater}；唯一正常工作的部分（除了history.push部分）就是问题中提供的部分。@deann我查看了文档中的所有内容，总结如下：如果你像其他人一样做，你的生活会轻松得多。