为什么 reduxform 提交句柄没有收到任何数据？

Question

我正在构建一个示例来重现该问题，但代码目前为止非常复杂，我需要一些时间才能完成。因此，我将列出一些最低限度的信息。希望问题的根本原因非常明显，并且有人可以在我完成示例之前找出问题所在。

我将以下处理程序传递给表单的 onSubmit 属性:

  handleReduxForm(reactthing, values, more) {
    console.log(reactthing);
    console.log(values);
    console.log(more);
}

它打印出以下内容

毫无疑问，处理程序已被调用。

但是，我没有接收表单上捕获的任何数据作为函数的第一个参数，而是

第一个参数：似乎是一个反应dom对象的代理

第二个参数：一个事件对象

第三个参数： 只是为了确保我没有遗漏表单数据。目前是undefined。

表格比较简单：

const checkoutForm = (props) => {
  const { handleSubmit, submitting, pristine } = props;


  return (
    <div>
      <div>
        <form onSubmit={handleSubmit}>


          <div className={styles.buttons}>
            <button
              className={`btn btn-primary ${styles['btn-submit']}`}
              type="submit"
              disabled={submitting || pristine}
            >
              Buy
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

const CheckoutForm = reduxForm({
  form: 'checkout',
  asyncValidate,
})(checkoutForm);

CheckoutForm.propTypes = {
  submitting: PropTypes.bool,
  pristine: PropTypes.bool,
  handleSubmit: PropTypes.func.isRequired,
};

export default CheckoutForm;

那么我的提交处理程序出了什么问题？为什么它没有获取任何表单数据？

编辑

这里有一个例子：https://www.webpackbin.com/bins/-Kh0qVhrYYi7iBqFXjSY

以下是主要文件列表：

Container.js

import React, {Component}  from 'react';
import CheckoutForm from './Form';

const testHandler = (a, b, c) => {
  console.log(` testHandler ${a}, ${b}, ${c}`); 
  console.log(` testHandler ${Object.keys(a)}, ${Object.values(a)}`);
  console.log(` testHandler ${Object.keys(b)}, ${Object.values(b)}`);  
}

class Container extends Component {
  render () {
    return (
      <div>
        <h1>
        Smart component
        </h1>
        <CheckoutForm 
          handleSubmit={testHandler}
         />
      </div>
      )
  }
}


export default  Container ;

Form.js

import React from 'react';
import { reduxForm, Field } from 'redux-form/immutable';

import Immutable from 'immutable';


const  { DOM: { input, select, textarea } } = React;


// <Field name="data" component={input}/>
// Uncaught Invariant Violation: input is a void element tag and must neither have `children` 
// nor use `dangerouslySetInnerHTML`. Check the render method of bound createElement.
const checkoutForm = (props) => {
  const { handleSubmit, submitting, pristine } = props;
  return (
    <div>
      <div>
        <form onSubmit={handleSubmit}>
          <h3>
            Checkout
          </h3>
          <div>
            <label>Data</label>
            <Field name="name" component="input" type="text" />
          </div>
          <div className='buttons'>
            <button
              className='btn btn-primary btn-submit'
              type="submit"
              disabled={submitting || pristine}
            >
              Buy
            </button>
          </div>
        </form>
      </div>
    </div>
  );
};

const CheckoutForm = reduxForm({
  form: 'checkout'
})(checkoutForm);

export default CheckoutForm;

我的例子的输出：

依赖项

使用 immutable 3.8.1 和 redux-form 6.6.1

Answer 1

您要做的是将 Container.js 中的位从

更改为

<CheckoutForm 
  handleSubmit={testHandler}
/>

至：

<CheckoutForm 
  onSubmit={testHandler}
/>

当我尝试更改时，我得到了一张带有值的地图。

为什么 reduxform 提交句柄没有收到任何数据？

Why the reduxform submit handle does not receive any data?

ecmascript-6

redux-form