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