Question

我有一个redux表单，当我提交时，无法在Submit方法中获取表单值。

我的表单是：

 import React from 'react';
import { Field, reduxForm } from 'redux-form/immutable';
import { connect } from 'react-redux';
import DynamicInputField from '../DynamicForm/DynamicInputField';
import './MyForm.css';
import { getInfo, saveInfo } from '../../redux/feature/baseInfo/baseInfoActions';
import Header from '../UI/Header/Header';
import Footer from '../UI/Footer/Footer';
import uuid from 'uuid';

class MyForme extends React.Component {
    componentDidMount() {
        const id = this.props.match.params["id"];
        if (id)
          this.props.getInfo(id);
      }

      formFields = [
        { name: 'FirstName', inputType: 'text', label: 'First Name' },
        { name: 'LastName', inputType: 'text', label: 'Last Name' }
      ]

      handleOnSave = () => {
        alert("save");
        return;
      }

      handleOnCancel = () => {
        alert("cancel")
        return;
      }

      submitInfo(data){
        console.log(data);
      }

      buttons = [
        { id: uuid(), text: "Save", shouldDisplay: true, isSubmit: true },
        { id: uuid(), text: "Cancel", shouldDisplay: true, callbackFunction: this.handleOnCancel }
      ]

      handleButtonClick = (buttonId) => {
        let button = this.buttons.find(b => b.id === buttonId);
        button.callbackFunction();
      }

      render() {
        const headerText = this.props.match.params["id"] ? "Edit" : "New";
        const {handleSubmit} = this.props;
        return (
          <div className='my-form'>
            <form onSubmit={handleSubmit(this.submitInfo)}>
              <Header text={headerText} />
              {this.formFields.map(formField => (
                <div key={formField.name}>
                  <Field
                    name={formField.name}
                    component={(field) => {
                      return (
                        <DynamicInputField formField={formField} {...field}/>
                      )
                    }}
                  />
                </div>
              ))}
              <Footer buttons={this.buttons} onButtonClicked={this.handleButtonClick} />
            </form>
          </div>
        )
      }
    }

    const mapStateToProps = ({ baseInfo }) => {
      return {
        initialValues: baseInfo.info.data
      };
    };

    const mapDispatchToProps = dispatch => {
      return {
        getInfo: id => dispatch(getInfo(id)),
        saveInfo: info => dispatch(saveInfo(info))
      };
    };

    export default connect(
      mapStateToProps,
      mapDispatchToProps
    )(reduxForm({
      form: 'MyForm', 
      enableReinitialize: true
    })(MyForm));

一切正常，但是提交表单时我看不到表单值值是：

地图{大小：14，_root：BitmapIndexedNode，所有者ID：未定义，__hash：未定义，__altered：false}大小：14__已更改：false__hash：undefined__ownerID：undefined_root：BitmapIndexedNode {ownerID：未定义，位图：356532454，节点： Array（10）} __ proto ：KeyedCollection

页脚组件为：

import React from "react";
import PropTypes from "prop-types";
import Button from "react-bootstrap/Button";
import uuid from "uuid";
import "./Footer.css";

class Footer extends React.Component {
  static propTypes = {
    buttons: PropTypes.arrayOf(
      PropTypes.shape({
        id: PropTypes.value,
        text: PropTypes.string,
        shouldDisplay: PropTypes.bool,
        callbackFunction: PropTypes.func
      })
    ),
    onButtonClicked: PropTypes.func
  };

  handleButtonClick = (buttonId, isSubmit) => {
    if (!isSubmit) this.props.onButtonClicked(buttonId);
  };

  render() {
    return (
      <div className="footer-wrapper">
        {this.props.buttons.map(button => (
          <Button
            key={uuid()}
            className="footer-button"
            type={button.isSubmit ? "submit" : "button"}
            onClick={() => this.handleButtonClick(button.id, button.isSubmit)}
          >
            {button.text}
          </Button>
        ))}
      </div>
    );
  }
}

export default Footer;

我也尝试这样做：

<form onSubmit={values => this.props.saveInfo(values)} >

，值的结果是：

气泡：是可取消：true currentTarget：表格 defaultPrevented：否 dispatchConfig：{phasedRegistrationNames：{…}，依赖项：Array（1），isInteractive：true} eventPhase：2 isDefaultPrevented：ƒfunctionThatReturnsFalse（） isPropagationStopped：ƒfunctionThatReturnsFalse（） isTrusted：正确 nativeEvent：事件{isTrusted：true，类型：“ submit”，目标：表单，currentTarget：表单，eventPhase：2，…} 目标：形式时间戳：21285.89999995893 类型：“提交” _dispatchInstances：FiberNode {标签：5，键：null，elementType：“ form”，类型：“ form”，stateNode：form，…} _dispatchListeners：▪onSubmit（值） _targetInst：FiberNode {标签：5，键：空，elementType：“表单”，类型：“表单”，stateNode：表单，…} 原始：对象

我怎么了？

谢谢

Answer 1

好，我知道了，以下数据正确

Map {size: 14, _root: BitmapIndexedNode, ownerID: undefined, __hash: undefined, __altered: false}size: 14__altered: false__hash: undefined__ownerID: undefined_root: BitmapIndexedNode {ownerID: undefined, bitmap: 356532454, nodes: Array(10)}__proto: KeyedCollection

我这样提取表单数据

    submitInfo = (data) => {
        const str= JSON.stringify(data, null, 2);
        const obj = JSON.parse(str);
//dispatch save action with this obj
      }

提交redux表单未传递表单值

1 个答案: