AntD 表单返回 undefined

Question

我对 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 只从表单中返回未定义的值吗？

谢谢你的帮助！

Answer 1

因为您没有在输入中输入任何内容。 添加输入规则。 阅读更多。 例如：

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>
  );