react 使用ui框架 antd 中的Form

注意點:

使用react 的antd 中的Form

千萬要記住,必定要,

 

import React from 'react'

import { Form, Icon, Input, Button, Checkbox } from 'antd';

class BindEvent extends React.Component {

constructor() {

super()

this.state = {

}

}

render() {

const { getFieldDecorator } = this.props.form;

return <div className="root">

<div className="login">

<div id="title">歡迎登陸</div>

<div id="box">

<Form className="login-form">

<Form.Item>

{getFieldDecorator('username', {

rules: [{ required: true, message: 'Please input your username!' }],

})(

<Input

prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />}

placeholder="Username"

/>,

)}

</Form.Item>

<Form.Item>

{getFieldDecorator('password', {

rules: [{ required: true, message: 'Please input your Password!' }],

})(

<Input

prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />}

type="password"

placeholder="Password"

/>,

)}

</Form.Item>

<Form.Item>

{getFieldDecorator('remember', {

valuePropName: 'checked',

initialValue: true,

})(<Checkbox>記住</Checkbox>)}

<a className="login-form-forgot" href="">

忘記密碼

</a>

<Button type="primary" htmlType="submit" className="login-form-button">

登陸

</Button>

Or <a href="">註冊</a>

</Form.Item>

</Form>

</div>

</div>

</div>

}

}

const BindEvent1=Form.create()(BindEvent)

export default BindEvent1