用 antd + react 写一个登录页面代码
时间: 2023-03-15 08:09:49 浏览: 103
我可以提供一个参考的示例代码:import React from 'react';
import { Form, Input, Button } from 'antd';class LoginForm extends React.Component {
handleSubmit = e => {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
}; render() {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit} className="login-form">
<Form.Item>
{getFieldDecorator('username', {
rules: [{ required: true, message: '请输入用户名!' }],
})(
<Input
placeholder="用户名"
/>,
)}
</Form.Item>
<Form.Item>
{getFieldDecorator('password', {
rules: [{ required: true, message: '请输入密码!' }],
})(
<Input
type="password"
placeholder="密码"
/>,
)}
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button">
登录
</Button>
</Form.Item>
</Form>
);
}
}const WrappedLoginForm = Form.create({ name: 'normal_login' })(LoginForm);export default WrappedLoginForm;