[英]React - Ant Design, Form with getFieldDecorator and initialValue not working in single chechbox
[英]Ant Design error: “Form.create() getFieldDecorator is not a function”
"antd": "^1.11.1",
"react": "^15.1.0",
"react-dom": "^15.1.0",
錯誤:未捕獲的TypeError:getFieldDecorator不是函數
螞蟻設計演示: 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()在antd@2.0中引入
您可以在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.