handleSubmit() onSubmit函数或传递onSubmit作为支柱

Question

• 我试着在我的步进器里加入复分解表。
• 因此，我遵循了本教程并使用了异步表单https://redux-form.com/8.0.4/docs/gettingstarted.md/。
• 在他们的演示中它工作得很好。
• 但是，当我点击“注册”按钮时，我将面临一个错误handleSubmit()、一个onSubmit函数或将onSubmit作为一个支柱。
• 所以我通过放置控制台来调试所有的文件。
• 当我点击submit时，我的控制台都没有打印出来。
• 会否因handleSubmit而出现问题？
• 你能告诉我怎么修吗，这样以后我就自己修。
• 提供下面的沙箱和代码片段。https://codesandbox.io/s/98qjwrrklr

const AsyncValidationForm = props => {
  console.log("AsyncValidationForm ---->");

  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <form onSubmit={handleSubmit}>
      <Field
        name="username"
        type="text"
        component={renderField}
        label="Username"
      />
      <Field
        name="password"
        type="password"
        component={renderField}
        label="Password"
      />
      <div>
        <button type="submit" disabled={submitting}>
          Sign Up
        </button>
        <button type="button" disabled={pristine || submitting} onClick={reset}>
          Clear Values
        </button>
      </div>
    </form>
  );
};

Answer 1

1)

您必须将一个onSubmit参数传递给具有de reduxForm HOC的组件：

  <AsyncValidationForm onSubmit={values => { console.log(values) }} />

2)您没有正确地创建存储，因为存储需要一个表单字段，如下所示：

import { reducer as reduxFormReducer } from 'redux-form';
const reducer = combineReducers({
  form: reduxFormReducer, // mounted under "form"
});

但是，您将该商店定义如下：

const reducer = () => ({});
const store = createStore(reducer);

您可以简单地从store.js文件导入index.js中的存储：

import store from './store';