当我按下提交时,如果电子邮件/密码中没有填写任何内容,它们下方应该会出现一条消息,说需要电子邮件/密码,但没有发生
代码沙盒链接: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;```
答案 0 :(得分:1)
您需要为 name
组件指定 Form.Item
属性。 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>