node.js - 不知道如何使用 redux 表单发布，无法将状态映射到 PostNew

Question

我目前正在构建一个相当简单的 MERN 堆栈应用程序，并且似乎无法让 redux 表单工作。这里我有我的 PostNew.js:

import React, { Component } from 'react';
import PostForm from './PostForm';
import { connect } from 'react-redux';
import * as actions from '../../actions';

class PostNew extends Component {
  constructor(props) {
    super(props);
    this.state = { show: false };
    this.toggleForm = this.toggleForm.bind(this);
  }

  toggleForm() {
    this.setState({ show: !this.state.show });
    this.state.show
      ? (document.querySelector('.newButton').innerHTML = 'new post')
      : (document.querySelector('.newButton').innerHTML = 'cancel');
  }

  render() {
    return (
      <div>
        <button className="newButton" onClick={this.toggleForm}>
          new post
        </button>
        {this.state.show ? (
          <PostForm
            onPostSubmit={() => {
              this.props.submitPost(formValues);
            }}
          />
        ) : null}
      </div>
    );
  }
}

function mapStateToProps(state) {
  // return {
  //   formValues: state.form.postForm.values
  // }
  console.log(state)
}

export default connect(
  mapStateToProps,
  actions
)(PostNew);

它是 PostForm 子项:

import React, { Component } from 'react';
import { reduxForm, Field } from 'redux-form';
import formFields from './formFields';
import _ from 'lodash';

class PostForm extends Component {
  renderFields() {
    return _.map(formFields, ({ label, name }) => {
      return (
        <form key={name} onSubmit={this.props.handleSubmit(this.props.onPostSubmit)} autoComplete="off">
          <Field
            key={name}
            type="text"
            component="input"
            label={label}
            name={name}
          />
        </form>
      );
    });
  }

  render() {
    return <div>{this.renderFields()}</div>;
  }
}

export default reduxForm({
  form: 'postForm'
})(PostForm);

正如您在我的帖子表单中看到的，我提交了表单并更新了状态，因为我可以在 postNew 中控制台记录状态。但是，只有当我在搜索输入中键入某些内容时，状态才会更新，因此 state.form.postForm.values 为 null。一旦我有了 this.props.formValues，我想将其传递给我编写的 Action 创建器，该创建器将这些值作为参数。

如果有人能将我推向正确的方向，我将非常感激。谢谢。

Answer 1

我认为问题在于您正在为每个字段创建一个新的(不同的)表单。您应该在渲染方法中添加表单标记，并为每个表单字段返回 Field。