import React, { Component, useEffect } from "react"";
import { Form, Input，Button } from "antd";
const Formltem = Form.ltem;
const nameRules = { required: true, message:”請輸入姓名"};
const passwordRules = { required: true, message:”請輸入密碼"};

export default class AntdFormPage extends Component {
	formRef = React.createRef();
	componentDidMount() {
		setTimeout(()=>{this.formRef.current.setFieldsValue({name: "default name"});}, 100);
	}
	onReset = () =>{
		this.formRef.current.resetFields();
	};
	onFinish = (val) => {
		console.log("onfinish" ,val);
	};
	onFinishFailed = (val) =>{
		console.log("onfinishfailed" , val);
	};
	render() {
		console.log("antd render" , this.formRef.current);
		return (
		<div>
			<Form
			ref={this.formRef}
			onFinish={this.onFinish}
			onFinishFailed={this.onFinishFailed}
			onReset={this.onReset}
			>
                <FormItem label="姓名" name="name" rules={[nameRules]}>
                    <Input placeholder="name" />
                </FormItem>
                <FormItem label="密碼" name="password" rules={[passwordRules]}>
                    <Input placeholder="password" />
                </FormItem>
                <FormItem>
                    <Button type="primary" size="large" htmlType="submit">
                        submit
                    </Button>
                </FormItem>
                <FormItem>
                    <Button type="default" size="large" htmlType="reset">
                        reset
                    </Button>
                </FormItem>
			</Form>
		</div>
		);
	}
}

antd4.0 Form表單回顯；