微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

Mobx 反应形式在初始化时出错

如何解决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 举报,一经查实,本站将立刻删除。