React ant 设计表单验证不起作用（提交时）答案

【问题标题】：React ant design form validation not working (on submit)React ant 设计表单验证不起作用（提交时）
【发布时间】：2021-04-03 12:50:46
【问题描述】：

当我按下提交时，如果没有填写电子邮件/密码，则会在其下方显示一条消息，说明需要电子邮件/密码，但没有发生

代码沙盒链接：https://codesandbox.io/s/gracious-hypatia-ieepw?file=/src/App.js:0-1221

import './App.css';
import {Button, Form, Input, Checkbox} from 'antd'
import 'antd/dist/antd.css';

function App() {
  return (
    <div className="App">
      
  <Form
      name="basic"
      initialValues={{
        remember: true,
      }}
    >
      <h1 className="Title">Sign Up</h1>
      <h2 className="Text">Enter Email :</h2>
      <Form.Item
        rules={[
          {
            required: true,
            message: 'Please input your email!',
          },
        ]}
      >
        <Input placeholder="Enter Email" />
      </Form.Item>
      <h2 className="Text">Enter Password :</h2>
      <Form.Item
        rules={[
          {
            required: true,
            message: 'Please input your password!',
          },
        ]}
      >
        <Input.Password placeholder="Enter Password" />
      </Form.Item>

      <Form.Item  name="remember" valuePropName="checked">
        <Checkbox>Remember me</Checkbox>
      </Form.Item>

      <Form.Item >
        <div className="Button">
        <Button type="primary" htmlType="submit" size="medium">
          Submit
        </Button>
        </div>
      </Form.Item>
    </Form>
    </div>
  );
}

export default App;```

【问题讨论】：

标签： javascript css reactjs antd

【解决方案1】：

您需要为您的Form.Item 组件指定name 属性。 antd 表单实用程序与 name 一起使用。因此，由于您尚未为文本输入字段定义名称，因此它无法验证或读取其值。你应该像这样改变你的Form.Item：

      <Form.Item
        name="email"
        rules={[
          {
            required: true,
            message: 'Please input your email!',
          },
        ]}
      >
        <Input placeholder="Enter Email" />
      </Form.Item>

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

【讨论】：