如何解决Mobx 反应形式在初始化时出错
大家好,我正在尝试添加 mobx react 表单,但在其中发现了一些奇怪的错误 这是我的代码
FormValidation.js
import MobxReactForm from "mobx-react-form";
import dvr from "mobx-react-form/lib/validators/DVR";
import validatorjs from "validatorjs";
import Fields from "../../modules/Admin/LoginSignup/Signup/Fields";
const plugins = {
dvr: dvr(validatorjs),};
const fields = Fields;
const hooks = {
onSuccess(form) {
alert("Form is valid! Send the request here.");
// get field values
console.log("Form Values!",form.values());
},onError(form) {
alert("Form has errors!");
// get all form errors
console.log("All form errors",form.errors());
},};
export default new MobxReactForm({ fields },{ plugins,hooks });
现在,只要我尝试在我的注册组件中访问它
import React,{ Component } from "react";
import { withStyles } from "@material-ui/core/styles";
import { styles } from "./Signup.styles";
import TextField from "@material-ui/core/TextField";
import { Link } from "react-router-dom";
import Button from "@material-ui/core/Button";
import { IClasses } from "../../../../interfaces";
import {getFormValidation} from "../../../../shared";
import Fields from "./Fields";
import { observable } from "mobx";
import { MobxReactForm } from "mobx-react-form";
import { observer } from "mobx-react";
interface Props {
classes: IClasses;
}
@observer
class Signup extends Component<Props> {
constructor(props: Props) {
super(props);
console.log(Fields);
}
@observable public myForm: MobxReactForm = getFormValidation();
//here this above line is givng error
render() {
const { classes } = this.props;
return (
<div className={classes.paper}>
<h2 className={classes.SignUpText}>Sign Up</h2>
<form>
<TextField
variant="outlined"
margin="normal"
fullWidth
name="firstName"
label="First Name"
type="text"
size="small"
/>
<TextField
variant="outlined"
margin="normal"
required
fullWidth
name="lastName"
label="Last Name"
type="text"
size="small"
/>
<Button
type="submit"
fullWidth
variant="contained"
color="primary"
className={classes.submit}
>
Sign In
</Button>
<div>
<Link to="/sign-in" className={classes.routerLink}>
Already have an account ? Sign in
</Link>
</div>
</form>
</div>
);
}
}
export default withStyles(styles)(Signup);
我收到错误
未捕获的引用错误:进程未定义 在 Object../node_modules/mobx-react-form/lib/index.js (index.js:46) webpack_require (bootstrap:18) 在 Module../src/shared/FormValidation/FormValidation.tsx (Dialog.tsx:38)
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。