javascript AntD Form return undefined

6ojccjat  于 2023-05-05  发布在  Java
关注(0)|答案(2)|浏览(116)

我有一个问题与antd形式。代码如下:

const onFinish = (form: any) => {
      console.log("FORM: ", form);
      //{email: undefined, password: undefined, "": undefined}
  };

        <Form
          onFinish={onFinish}
          name="login"
          layout="vertical"
        >
          <Form.Item
            name="email"
          >
            <Typography>EMAIL</Typography>
            <Input />
          </Form.Item>

          <Form.Item
            name="password"
          >
            <Typography>PASSWORD</Typography>
            <Input type="password" />
          </Form.Item>

          <Form.Item>
            <Button htmlType="submit" className={styles.submitButton}>
              SIGN IN
            </Button>
          </Form.Item>
        </Form>

有人能告诉我为什么在我的按钮上点击,antd返回我从形式只有未定义的值?
感谢任何帮助!

uxh89sit

uxh89sit1#

因为你还没有在输入中输入任何东西。添加输入规则。Read more。例如:

const onFinish = (form: any) => {
    console.log("FORM: ", form);
  };

  return (
    <Form onFinish={onFinish} name="login" layout="vertical">
      <Form.Item
        name="email"
        label="Email"
        rules={[
          {
            required: true,
            message: "Please input your Email!"
          }
        ]}
      >
        <Input />
      </Form.Item>

      <Form.Item
        name="password"
        label="password"
        rules={[
          {
            required: true,
            message: "Please input your Password!"
          }
        ]}
      >
        <Input type="password" />
      </Form.Item>

      <Form.Item>
        <Button htmlType="submit">SIGN IN</Button>
      </Form.Item>
    </Form>
  );
rks48beu

rks48beu2#

我试过你的代码,它工作得很好,所以我认为它就像@ Alexandria Kosykh提到的那样,你可能没有输入任何输入。
但是,onFinish函数可能存在潜在问题,您期望form参数为any类型,但您访问其属性时却将其定义为。具体来说,您正在记录form对象的emailpassword属性,但由于您没有在Form.Item组件中指定它们的类型,因此TypeScript认为它们是可选的,并且可能未定义。
要修复它,您可以使用interface在onFinish函数中定义form参数的类型:

interface LoginForm{
    email: string;
    password: string;
}

const onFinish = (form: LoginForm) => {
    console.log("FORM: ", form);
}

相关问题