AntD 表单返回 undefined答案

【问题标题】：AntD Form return undefinedAntD 表单返回 undefined
【发布时间】：2022-01-12 22:27:02
【问题描述】：

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

感谢您的帮助！

【问题讨论】：

标签： javascript html reactjs typescript antd

【解决方案1】：

因为您没有在输入中输入任何内容。添加输入规则。 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>
  );

【讨论】：