[英]Ant Design error: “Form.create() getFieldDecorator is not a function”
"antd": "^1.11.1",
"react": "^15.1.0",
"react-dom": "^15.1.0",
Error: Uncaught TypeError: getFieldDecorator is not a function 错误:未捕获的TypeError:getFieldDecorator不是函数
ant design demo: https://ant.design/components/form/ 蚂蚁设计演示: https : //ant.design/components/form/
import React, {Component} from 'react';
import { Form, Icon, Input, Button } from 'antd';
const FormItem = Form.Item;
const HorizontalLoginForm = Form.create()(React.createClass({
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 inline onSubmit={this.handleSubmit}>
<FormItem>
{getFieldDecorator('userName', {
rules: [{ required: true, message: 'Please input your username!' }],
})(
<Input addonBefore={<Icon type="user" />} placeholder="Username" />
)}
</FormItem>
<FormItem>
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }],
})(
<Input addonBefore={<Icon type="lock" />} type="password" placeholder="Password" />
)}
</FormItem>
<FormItem>
<Button type="primary" htmlType="submit">Log in</Button>
</FormItem>
</Form>
);
},
}));
export default HorizontalLoginForm;
.getFieldDecorator() is introduced in antd@2.0 .getFieldDecorator()在antd@2.0中引入
You can find 1.x docs here http://1x.ant.design 您可以在http://1x.ant.design找到1.x文档
import React from 'react'
import ReactDOM from 'react-dom'
import 'antd/dist/antd.css'
import { Form, Input, Tooltip, Icon, Cascader, Select, Row, Col, Checkbox, Button, AutoComplete, } from 'antd'
const FormItem = Form.Item
class LoginForm extends React.Component {
state = {
confirmDirty: false,
autoCompleteResult: [],
}
handleSubmit = e => {
e.preventDefault()
this.props.form.validateFieldsAndScroll((err, values) => {
if (!err) {
console.log('Received values of form: ', values)
}
})
}
render() {
const { getFieldDecorator } = this.props.form
return (
<Form inline onSubmit={this.handleSubmit}>
<FormItem>
{getFieldDecorator('userName', {
rules: [{ required: true, message: 'Please input your username!' }],
})(
<Input addonBefore={<Icon type="user" />} placeholder="Username" />
)}
</FormItem>
<FormItem>
{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }],
})(
<Input
addonBefore={<Icon type="lock" />}
type="password"
placeholder="Password"
/>
)}
</FormItem>
<FormItem>
<Button type="primary" htmlType="submit">
Log in
</Button>
</FormItem>
</Form>
)
}
}
const HorizontalLoginForm = Form.create({ name: 'login' })(LoginForm)
export default HorizontalLoginForm
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.