反应中的handleSubmit（）中没有this.props

Posted 2023-02-22

【中文标题】反应中的handleSubmit（）中没有this.props

【英文标题】：no this.props inside handleSubmit() in react

【发布时间】：2018-01-06 10:41:13

【问题描述】：

我查看了其他问题，但似乎没有一个答案有帮助。我没有安装 redux-form。我是全新的反应（对开发人员也很陌生）

在我的 App.js 中我正在导入：

import React,  Component  from 'react';
import 
  BrowserRouter as Router, 
  Route, 
  Switch,
  NavLink
 from 'react-router-dom'

class App extends Component 
  render() 
    return (
      <Router>
        <div className="App">
          <nav className="uk-navbar fixed">
            ...
          </nav>  
          <Switch>
            <Route exact path = "/" component=Home/>
            <Route path = "/tasks/new" component=AddTask/>
            ... more routes
            </Route>
          </Switch>
        </div>
      </Router>
    );
  


export default App;

我所有的表单（总共 3 个）都有一个 handleOnSubmit，我有一个箭头函数：

  handleOnSubmit = (event) => 
    event.preventDefault()
    apiRequest.post(`projects/`, this.state)
    this.props.router.push('/client');
  

被表单调用：

<form className="uk-form" onSubmit=this.handleOnSubmit>

而且，我的 handleOnSubmit 中没有 this.props，所以我无法重新路由用户。

这是完整的错误：

TypeError: Cannot read property 'push' of undefined
AddProject._this.handleOnSubmit
src/components/projects/AddProject.js:20
  17 | handleOnSubmit = (event) => 
  18 |   event.preventDefault()
  19 |   apiRequest.post(`projects/`, this.state)
> 20 |   this.props.router.push('/client');
  21 | 
  22 | 
  23 | handleOnChange = event => 
View compiled
▼ 14 stack frames were expanded.
Object../node_modules/react-dom/lib/ReactErrorUtils.js.ReactErrorUtils.invokeGuardedCallback
node_modules/react-dom/lib/ReactErrorUtils.js:69
executeDispatch
node_modules/react-dom/lib/EventPluginUtils.js:85
Object.executeDispatchesInOrder
node_modules/react-dom/lib/EventPluginUtils.js:108
executeDispatchesAndRelease
node_modules/react-dom/lib/EventPluginHub.js:43
executeDispatchesAndReleaseTopLevel
node_modules/react-dom/lib/EventPluginHub.js:54
forEachAccumulated
node_modules/react-dom/lib/forEachAccumulated.js:24
Object.processEventQueue
node_modules/react-dom/lib/EventPluginHub.js:254
runEventQueueInBatch
node_modules/react-dom/lib/ReactEventEmitterMixin.js:17
Object.handleTopLevel [as _handleTopLevel]
node_modules/react-dom/lib/ReactEventEmitterMixin.js:27
handleTopLevelImpl
node_modules/react-dom/lib/ReactEventListener.js:72
ReactDefaultBatchingStrategyTransaction.perform
node_modules/react-dom/lib/Transaction.js:143
Object.batchedUpdates
node_modules/react-dom/lib/ReactDefaultBatchingStrategy.js:62
Object.batchedUpdates
node_modules/react-dom/lib/ReactUpdates.js:97
dispatchEvent
node_modules/react-dom/lib/ReactEventListener.js:147
▲ 14 stack frames were expanded.

非常感谢任何帮助。非常感谢！

我有 super()，this.props.router.push 和 this.props.router.history 都不起作用。

this.props 在函数中根本不起作用。

这是我的全部组件——再次感谢！

import React,  Component  from 'react'

import apiRequest from '../../redux/modules/apiRequests'

export default class AddProject extends Component 

  constructor(props)
    super(props)
    this.state = 
      name: '',
      bill_rate: '',
      clientId: this.props.clientId
    
  
  
  handleOnSubmit = (event) => 
    event.preventDefault()
    apiRequest.post(`projects/`, this.state)
    this.props.router.push('/client');
  

  handleOnChange = event => 
    this.setState(
      [event.target.name]: event.target.value
    );
  
 
  render() 
    return (
      <div>
        <form className="uk-form" onSubmit=this.handleOnSubmit>
          <fieldset>
              <legend>Add Project</legend>
              <div className="uk-form-row">
                <legend>Project Name</legend>
                <input
                type="text"
                placeholder="Project Name"
                name="name"
                onChange=this.handleOnChange />
              </div>
              <div className="uk-form-row">
                <legend>Project Bill Rate</legend>
                <input
                type="text"
                placeholder="Project Bill Rate"
                name="bill_rate"
                onChange=this.handleOnChange />
              </div>
              <input
                type="hidden"
                name=this.props.clientID
                />
              <input
            type="submit"
            value="Add Project" />
          </fieldset>
        </form>
      </div>
    );
  
;

【问题讨论】：

Programmatically navigate using react router的可能重复

试试<form className="uk-form" onSubmit=this.handleOnSubmit.bind(this)>

无需绑定此语法：Handler = (event) =>

此语法确保this 绑定在handleClick 中^^

facebook.github.io/react/docs/handling-events.html

【参考方案1】：

这不是您的错误的直接答案，但 React Router v4 有一个 声明式 替代方案：

import Redirect from 'react-router-dom';

// in render function
this.state.shouldRedirect ? <Redirect to="redirect-url"/> : null

// in method or somewhere else (lifecycle hooks etc)
this.setState(shouldRedirect: true);

一旦Redirect 被渲染，你就会被重定向。

【讨论】：

这很好用！！！请注意，它不会重定向到同一页面（表单提交后）。但是我会通过调度一个动作来用新的表单数据更新页面。非常感谢！我支持你，但由于我是新手，它不会显示:(

【参考方案2】：

我认为您只需将this.props.router.push 替换为this.props.history.push()

【讨论】：

我都试过了，但没有这个，所以两个都行不通。

【参考方案3】：

你需要添加构造函数

constructor(props)
super(props);

编辑： 添加这个

App.contextTypes = 
  router: PropTypes.object,
;

那就用this.props.router.push()代替试试

this.context.router.push()

【讨论】：

嗨，我的构造函数中有这个，请参阅最后一个 sn-p。

谢谢你，我一定是遗漏了一些东西，我把 App.contextTypes 放在 this.state 下面的构造函数中，并导入了我的 App 文件并从“prop-types”导入 PropTypes，this.context 是空。