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

Question

我正在构建一个非常简单的前端应用程序来连接一些 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);

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

import React, { Component } from 'react';
import ListContainer from './containers/ListContainer.js'
import './App.css';

export default class App extends Component {


  render() {
    return (
      <div className="App">
        <ListContainer />
      </div>
    );
  }
}

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

有任何想法吗？ 我在使用 redux 表单时遇到了很多这个问题，但我永远无法真正弄清楚我哪里出错了。

谢谢

Answer 1

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

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

这里有一个工作演示： http : //codepen.io/PiotrBerebecki/pen/vXXXaJ

Answer 2

虽然我没有使用过redux-form ，但我认为问题在于您的代码，您可以将<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))} >更改为

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

和你的handleFormSubmit函数

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

编辑#1

通过redux-form文档后，您可以将表单更改为

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

它应该工作。

---

并进一步简化事情

您可以将form component代码更改为

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

和handleFormSubmit函数

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