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（父组件）如下 - ＆gt;

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

这里的工作演示：sample question

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

Redux Form道具未在事件处理程序

2 个答案: