在redux-form 6.0.5中，值没有传递给提交函数

Values not being passed to on submit function in redux-form 6.0.5

本文关键字：函数 提交 redux-form      更新时间：2023-09-26

由于某种原因，当我使用匿名函数定义组件时，这些值从未传递给提交处理程序。我正在使用redux-form 6.0.5

我创建了下面这个简单的表单:

class TestForm extends Component {
    constructor(props) {
        super(props);
    }
    submit(e) {
        console.log(e);
    }
    renderField(field) {
        return (
            <input {...field.input} type="text" className="form-control" placeholder={field.placeholder} />
        );
    }
    render() {
        const handleSubmit = this.props.handleSubmit;
        return (
            <form onSubmit={handleSubmit(this.submit)}>
                <div className="form-group">
                    <label>Title</label>
                    <Field name="title"
                        placeholder="Title"
                        component={this.renderField} />
                </div>
                <div className="form-group">
                    <label>Category</label>
                    <Field name="category"
                        placeholder="Category"
                        component={category => (
                         <input type="text" className="form-control" {...category}/>
                        )
                        } />
                </div>
                <button type="submit" className="btn btn-primary">Submit</button>
            </form>
        );
    }
}

当调用submit(e)时，控制台显示标题字段的值，但不显示类别的值。

是否有什么问题与我的匿名函数类别字段，或者匿名函数不支持作为组件?

我实际上和你在同一门课上，想发表一下这个问题是什么。从V4到V6有一个突破性的变化，在课程中我们使用的是redux形式的V4。我喜欢学习最新的东西，所以我更新了所有东西，但这很痛苦，但我确实找到了让表单实际保存的解决方案。首先，你必须让{ connect }和{ reduxForm }分开使用。此外，没有更多的领域，现在有领域，所以{ reduxForm, Field }这是V6。至于需要看到的工作代码。

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { reduxForm, Field } from 'redux-form';
import { createPost } from '../actions/index';
const renderInput = field => (
  <div className="form-group">
    <label>{field.label}</label>
    <input className="form-control" {...field.input} type=  {field.type}/>
  </div>
);
const renderTextarea = field => (
  <div className="form-group">
    <label>{field.label}</label>
    <textarea className="form-control" {...field.input}/>
  </div>
);

class PostsNew extends Component{
  render(){
    const { handleSubmit } = this.props;
    return (
      <form onSubmit={handleSubmit(this.props.createPost)}>
        <h3>Create A New Post</h3>
        <Field
          label="Title"
          name="title"
          type="text"
          component={renderInput} />
        <Field
          label="Categories"
          name="categories"
          type="text"
          component={renderInput}
        />
        <Field
          label="Content"
          name="content"
          component={renderTextarea}
        />
        <button type="submit" className="btn btn-primary">Submit</button>
      </form>
    );
  }
}
export default reduxForm({
  form: 'PostsNewForm', 
})(connect(null,{ createPost })(PostsNew));

我希望这对你有帮助，如果不是你确切的问题，有一个迁移指南。v5-v6

相关文章：