代码
import * as React from 'react';
import { RouteComponentProps } from 'react-router';
import { Form, Icon, Input, Button, Checkbox } from 'antd';
import { FormComponentProps, FormProps, WrappedFormUtils } from "antd/lib/form/Form";
const FormItem = Form.Item;
const LoginForm = Form.create()(
class LoginForm1 extends React.Component<FormComponentProps, any>{
constructor() {
super();
this.state = { forecasts: [], loading: true };
}
handleSubmit = (e: any) => {
e.preventDefault();
this.props.form.validateFields((err: any, values: any) => {
if (!err) {
console.log('Received values of form: ', values);
}
});
}
public render() {
const { getFieldDecorator } = this.props.form;
return (
<Form onSubmit={this.handleSubmit} className="login-form">
<FormItem>
{getFieldDecorator('userName', {
rules: [{ required: true, message: 'Please input your username!' }],
})(
<Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="Username" />
)}
</FormItem>
<FormItem>
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }],
})(
<Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="Password" />
)}
</FormItem>
<FormItem>
{getFieldDecorator('remember', {
valuePropName: 'checked',
initialValue: true,
})(
<Checkbox>Remember me</Checkbox>
)}
<a className="login-form-forgot" href="">Forgot password</a>
<Button type="primary" htmlType="submit" className="login-form-button">
Log in
</Button>
Or <a href="">register now!</a>
</FormItem>
</Form>
);
}
}
);
export class Login extends React.Component<RouteComponentProps<{}>, any>{
public render() {
return (
<LoginForm />
);
}
}
报错信息
这个form为何是必须的
先这样写吧,这个类型暂时有点搞不定。
Form.create<any>()(LoginForm)