Question

出于某种原因，当我使用匿名函数来定义我的组件时，值永远不会传递给提交处理程序。我使用的是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）时，控制台显示标题字段的值，但不显示所显示类别的值。

我的类别字段的匿名函数有问题，还是作为组件不支持匿名函数？

Answer 1

我实际上和你一样，想发布问题所在。从V4到V6有一个突破性的变化，在这个过程中我们使用了redux-form的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

在redux-form 6.0.5

1 个答案: