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

Question

我正在创建一个表单，在填写并单击提交按钮后应该导航到另一个组件。不过，我好像不能把历史作为道具来传递。我假设我对 this 的绑定做错了，但无法弄清楚。谢谢

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

这是我的 LandingPage.js

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

这里是我的活动举办地。 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>
    )}/>
  )

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

Answer 1

我不知道这是否能解决您所有的问题，但我发现您的 LandingPage 渲染函数中缺少一些重要的东西

onClickOnLastInputsForm={e => this.formAnswersUpdater}

您忘记传递参数：e

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

确保您也将此添加到 MyForm。你也把它忘在那里了。修复这些错误后，您还有其他错误吗？

编辑：在对文档进行一些检查后，react-router-dom 的典型用法看起来与您所用的模式不同。最常见的路由处理模式是拥有一组根路由，并使用 npm 包中的 Link 进行导航。我在 react-router 的文档中只看到历史记录及其派生词。我知道 react-router-dom 是 react-router 的派生词，但我认为如果您遵循 React 的正常模式，将来调试时会容易很多。

关于它的一篇不错的文章。它甚至有一个使用它的示例应用程序：https://medium.com/@pshrmn/a-simple-react-router-v4-tutorial-7f23ff27adf

Answer 2

好的，这是我处理这个问题的方式。

我没有导出 LandingPage 组件，而是将其包装在 withRouter 函数中，然后导出。

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)

然后在 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>
  )

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

Pass history as props to an event handler

reactjs

react-router-v4