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提交句柄没有收到任何数据？

1 个答案: