注意点:
使用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