redux - 提交 redux 表单未传递表单值
问题描述
我有一个 redux 表单,当我提交时,我无法在提交方法中获取表单值。
我的表格是:
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));
一切正常,但是当我提交表单时,我看不到表单值,值为:
地图 {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
页脚组件是:
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 可取消:true currentTarget:表单 defaultPrevented:false dispatchConfig:{phasedRegistrationNames:{…},依赖项:Array(1),isInteractive:true} eventPhase:2 isDefaultPrevented:ƒ functionThatReturnsFalse() isPropagationStopped:ƒ functionThatReturnsFalse() isTrusted: true nativeEvent: Event {isTrusted: true, type: "submit", target: form, currentTarget: form, eventPhase: 2, ...} target: form timeStamp: 21285.89999995893 type: "submit" _dispatchInstances: FiberNode {tag: 5, key: null , elementType: "form", type: "form", stateNode: form, ...} _dispatchListeners: ƒ onSubmit(values) _targetInst: FiberNode {tag: 5, key: null, elementType: "form", type: "form", stateNode: form, ...} proto : 对象
我的错误是什么?
谢谢
解决方案
好的,我想通了,下面的数据是正确的
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
}
推荐阅读
- node.js - 我该如何解决这个错误 - npm start - npm ERR!缺少脚本:开始
- reactjs - 如何根据返回值更改 window.location.href?
- django - 是否有支持 REST API 的 django-avatar 应用程序?
- list - tkinter 中的嵌套帧
- c - 为什么我的 C 程序会跳过 if 语句?
- android - 奖励广告未加载
- flutter - Masked Blur for Image
- reactjs - 使用 Typescript 和 i18next 使用 Jest 测试日期对象
- javascript - 使用 jQuery 将 div 移动到另一个 div 中 - 重复序列
- design-patterns - 通过单个对象管理多个类