Question

大家好，我正在尝试添加 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)

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

0 个答案: