Javascript Redux表单道具未显示在事件处理程序中

我正在构建一个非常简单的前端应用程序来连接几个API。我有一个redux表单，它应该触发一个事件处理程序，然后触发一个动作创建者。事件处理程序目前未接收任何道具（仅获取一个空对象）。这是我的组件

import React, { Component } from 'react'
// import { Link } from 'react-router'
import { reduxForm } from 'redux-form'
import fetchConcerts from '../actions/fetchConcerts.js'

class ListContainer extends Component {

  handleFormSubmit(formProps){
    event.preventDefault()
    debugger
    this.props.fetchConcerts(formProps)

  }


  render(){
    const { fields: { userCity, userDate }, handleSubmit } = this.props;


        return (
            <div>
            <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))} >
                <label>City</label>
                <input type="text" className="form-input" {...userCity} />
                <label>Date</label>
                <input type="text" className="form-input" {...userDate} />
                <input type="submit" value="Submit" />
            </form>
            </div>
        );
      }
    }


export default reduxForm({
      form: 'search',
      fields: ['userCity', 'userDate']
    }, null, { fetchConcerts })(ListContainer);

import React，{Component}来自“React”
//从“反应路由器”导入{Link}
从“redux表单”导入{reduxForm}
从“../actions/fetchConcerts.js”导入fetchConcerts
类ListContainer扩展组件{
handleFormSubmit（formProps）{
event.preventDefault（）
调试器
this.props.fetchConcerts（formProps）
}
render（）{
const{fields:{userCity，userDate}，handleSubmit}=this.props；
返回(
城市
日期
);
}
}
导出默认reduxForm({
表格：'搜索'，
字段：['userCity'，'userDate']
}，null，{fetchConcerts}）（ListContainer）；

App.js（父组件）如下-->

import React，{Component}来自'React'；
从“./containers/ListContainer.js”导入ListContainer
导入“/App.css”；
导出默认类应用程序扩展组件{
render（）{
返回(
);
}
}

提交时，handleFormSubmit被启动，我点击了我的调试器，但formProps是Object={}

有什么想法吗？我在redux表单中经常遇到这个问题，但我永远都无法真正找出我的错误所在

---

谢谢

您是否正在尝试访问输入字段中输入的值？如果是，这可能会有帮助：

handleFormSubmit(event) {
  event.preventDefault();

  // Access value and attributes of the City input
  console.log(event.target.elements[0].value);
  console.log(event.target.elements[0].attributes);

  // Access value and attributes of the Date input
  console.log(event.target.elements[1].value);
  console.log(event.target.elements[1].attributes);    
}

---

这里有一个工作演示：

虽然我没有使用

redux表单

，但我认为问题在于您的代码，您可以将

更改为

<form
    onSubmit={ (event) => {
            handleSubmit( this.handleFormSubmit.bind(this, event, formProps) );
        }
    }
>

编辑#1

查看

redux表单

文档后，您可以将表单更改为

<form
    onSubmit={ (event) => {
            handleSubmit( data => { this.handleFormSubmit.bind(this, event, data) } );
        }
    }
>

和

handleFormSubmit

函数

handleFormSubmit(event, formProps){
    event.preventDefault()
    debugger
    this.props.fetchConcerts(formProps)
}

handleFormSubmit(data){
    console.log('form data', data);
    this.props.fetchConcerts(data)
}

---

您正在使用哪个版本的redux表单？该版本似乎无效：。如果您确实使用的是旧版本，那么您可能希望尝试使用最新版本（6.x），因为当我尝试更新任何软件包时，创建者已经修复了大量错误。npm向我抛出了大量错误列表。这似乎是一个问题：npm错误！缺少对等dep:react-redux@^4.3.0，redux需要-form@6.0.5npm错误！缺少对等dep:redux@^3.0.0，是redux所必需的-form@6.0.5so我解决了依赖项并更新了所有内容--没有错误，使用redux form 6.0.5，但仍然存在相同的问题如果将

handleFormSubmit

方法移动到

应用程序中会发生什么，然后添加
嗯，我仍然遇到同样的问题，现在它希望我在某处声明formProps。。redux表单的文档非常糟糕：-/到处玩now@tqr_aupa_atleti更新了答案，希望这能对你有所帮助。谢谢！是的，上面的代码完全绕过了我的事件处理程序。这很奇怪，我觉得我的代码与以前的项目中的代码完全相同。redux表单应该包装组件，这样您就不需要这样做了——它应该在工作时自动将输入值传递给道具。谢谢
<form onSubmit={ handleSubmit( data => { this.handleFormSubmit.bind(this, data) } ) } >

handleFormSubmit(data){
    console.log('form data', data);
    this.props.fetchConcerts(data)
}