handleSubmit 上的 REDUX-FORM 错误

Question

我在使用 redux-form

时遇到错误

控制台中的错误消息：

bundle.js:32511 Uncaught Error: You must either pass handleSubmit() an onSubmit function or pass onSubmit as a prop(…)

页面加载和按钮点击出现以上错误

请参考以下导致控制台错误的代码示例。

import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import { createPost } from '../actions/index';

class PostsNew extends Component {

  render() {
    const { fields: { title, categories, content }, handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit(this.props.createPost)}>
        <h3>Create a new Post</h3>

        <div className="form-group">
          <label>Title</label>
          <input type="text" className="form-control" {...title}/>
        </div>

        <div className="form-group">
          <label>Categories</label>
          <input type="text" className="form-control" {...categories}/>
        </div>

        <div className="form-group">
          <label>Content</label>
          <textarea className="form-control" {...content}/>
        </div>
        <button type="submit" className="btn btn-primary">Submit</button>
      </form>
    );
  }
}

export default reduxForm({
  form: 'PostsNewForm',
  fields: ['title', 'categories', 'content']
}, null, { createPost })(PostsNew);

This was a step by step follow of StephenGrider redux tutorial

提前致谢:)

Answer 1

你需要从父组件传递 onsubmit 属性

import React from 'react';
import { connect } from 'react-redux';
import { initialize } from 'redux-form';
import PostsNew from './PostsNew';


class App extends React.Component {

  handleSubmit(data) {
    console.log('Submission received!', data);
    this.props.dispatch(initialize('contact', {})); // clear form
  }

  render() {
    return (
      <div id="app">
        <h1>App</h1>
        <PostsNew onSubmit={this.handleSubmit.bind(this)}/>
      </div>
    );
  }

}

export default connect()(App);

Answer 2

如果 PostsNew 是 Container（如果这是直接从 Routes 调用的）那么你必须创建 handleSubmit 函数而不是从 this.props

import React, { Component } from 'react';
import { reduxForm } from 'redux-form';
import { createPost } from '../actions/index';

class PostsNew extends Component {

  handleSubmit(formValues){
    console.log(formValues);
    //do what ever you want
  }

  render() {
    const { fields: { title, categories, content } } = this.props;
    return (
      <form onSubmit={this.handleSubmit(this.props.createPost)}>
        <h3>Create a new Post</h3>

        <div className="form-group">
          <label>Title</label>
          <input type="text" className="form-control" {...title}/>
        </div>

        <div className="form-group">
          <label>Categories</label>
          <input type="text" className="form-control" {...categories}/>
        </div>

        <div className="form-group">
          <label>Content</label>
          <textarea className="form-control" {...content}/>
        </div>
        <button type="submit" className="btn btn-primary">Submit</button>
      </form>
    );
  }
}

或
如果 PostsNew 是在容器内使用的 React 组件，那么您可以在 PostsNew

的 props 中传递 handleSubmit

<PostsNew
 handleSubmit={ (values) => {console.log(values)}}
/>

Answer 3

我运行遇到了同样的问题，直到我明确地将连接导入到我的文件中。之后，我能够成功调用this.props.createPost。

这是我的解决方案：

import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form'
import { createPost } from '../actions/index';
import { connect } from 'react-redux';

class PostsNew extends Component {
    render() {
        const { handleSubmit } = this.props;
        return (
             <form onSubmit={handleSubmit(this.props.createPost)}>
             <h3>Create a New Post</h3>
             <div className="form-group">
                 <label>Title</label>
                 <Field name="title" component="input" type="text" className="form-control" placeholder="Title" />
             </div>
             <div className="form-group">
                <label>Categories</label>
                <Field name="categories" component="input" type="text" className="form-control" placeholder="Title" />
             </div>
             <div className="form-group">
                <label>Content</label>
                <Field name="content" component="textarea" type="text" className="form-control" placeholder="Title" />
             </div>
             <button type="submit" className="btn btn-primary">Submit</button>
         </form>
        );
    }
}

export default connect(null, {createPost})(reduxForm({
    form: 'PostsNew'
})(PostsNew));

Answer 4

这非常有效。检查您的动作创建器，您的动作创建器中应该有拼写错误。请参考下面的动作创建器。如果您按照他提到的步骤进行操作，这应该可以完美运行。错误说的是你的道具中没有叫做 createPost 的东西。此外，您可以在 github.

中找到我的工作项目 here

export function createPost(props) {
  console.log(props);
  const request = axios.post(`${ROOT_URL}/posts${API_KEY}`, props);
  return {
    type: CREATE_POST,
    payload: request
  };
}

Answer 5

请安装 redux-form.

版本 5

npm install --save redux-form@5

handleSubmit 上的 REDUX-FORM 错误

REDUX-FORM error on handleSubmit

reactjs

redux

redux-form

请参考以下导致控制台错误的代码示例。