mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-11 11:32:52 +08:00

* demo: refactor form login demo * demo: refactor form login demo * remove site-form-item-icon
52 lines
1.4 KiB
TypeScript
52 lines
1.4 KiB
TypeScript
import React, { useEffect, useState } from 'react';
|
|
import { LockOutlined, UserOutlined } from '@ant-design/icons';
|
|
import { Button, Form, Input } from 'antd';
|
|
|
|
const App: React.FC = () => {
|
|
const [form] = Form.useForm();
|
|
const [clientReady, setClientReady] = useState<boolean>(false);
|
|
|
|
// To disable submit button at the beginning.
|
|
useEffect(() => {
|
|
setClientReady(true);
|
|
}, []);
|
|
|
|
const onFinish = (values: any) => {
|
|
console.log('Finish:', values);
|
|
};
|
|
|
|
return (
|
|
<Form form={form} name="horizontal_login" layout="inline" onFinish={onFinish}>
|
|
<Form.Item
|
|
name="username"
|
|
rules={[{ required: true, message: 'Please input your username!' }]}
|
|
>
|
|
<Input prefix={<UserOutlined />} placeholder="Username" />
|
|
</Form.Item>
|
|
<Form.Item
|
|
name="password"
|
|
rules={[{ required: true, message: 'Please input your password!' }]}
|
|
>
|
|
<Input prefix={<LockOutlined />} type="password" placeholder="Password" />
|
|
</Form.Item>
|
|
<Form.Item shouldUpdate>
|
|
{() => (
|
|
<Button
|
|
type="primary"
|
|
htmlType="submit"
|
|
disabled={
|
|
!clientReady ||
|
|
!form.isFieldsTouched(true) ||
|
|
!!form.getFieldsError().filter(({ errors }) => errors.length).length
|
|
}
|
|
>
|
|
Log in
|
|
</Button>
|
|
)}
|
|
</Form.Item>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
export default App;
|