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