reactjs - 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

如果 PostsNew 是容器(如果直接从路由中调用)，那么您必须创建 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)}}
/>