到页面上展示:
报错:
sampleInfoForm.js:205Uncaught TypeError: getFieldDecorator is not a function
原因是什么呢??
PS.我是抄antdesign的Form 动态增减表单项的demo报错的
代码:
import React from 'react'
import {render} from 'react-dom'
let uuid = 0;
//注意formClass的名称和var TalentUserAddForm = Form.create()(formClass);的TalentUserAddForm不能一样
let formClass = React.createClass({
componentWillMount() {
this.props.form.setFieldsValue({
keys: [0],
});
},
remove(k) {
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue('keys');
const nextKeys = keys.filter((key) => {
return key !== k;
});
// can use data-binding to set
form.setFieldsValue({
keys: nextKeys,
});
},
add() {
uuid++;
const { form } = this.props;
// can use data-binding to get
const keys = form.getFieldValue('keys');
const nextKeys = keys.concat(uuid);
// can use data-binding to set
// important! notify form to detect changes
form.setFieldsValue({
keys: nextKeys,
});
},
render() {
const { getFieldDecorator, getFieldValue } = this.props.form;
console.log(getFieldDecorator);
const formItems = getFieldValue('keys').map((k) => {
return (
<Form.Item {...formItemLayout} label={`good friend${k}:`} key={k}>
<Input style={{ width: '60%', marginRight: 8 }} />
<Button onClick={() => this.remove(k)}>remove</Button>
</Form.Item>
);
});
return (
<p style={{display:"inline"}}>
<Modal title="指派专家"
visible={this.props.appointExpertPostFormReduce.get('addModleVisible')}
onhandleRelease={this.handleSubmit}
confirmLoading={this.props.appointExpertPostFormReduce.get('confirmLoading')}
onCancel={this.props.appointExpertPostFormAction.onCancel}
width={900}
maskClosable={false}
footer={[
<Button style={{backGround:"#000"}} key="btn" type="ghost" size="large" onClick={this.props.appointExpertPostFormAction.onCancel}>
取 消
</Button>,
<Button key="submit" type="primary" size="large" onClick={this.handleSubmit}>
确 定
</Button>,
]}
>
<Form horizontal>
{formItems}
<Form.Item wrapperCol={{ span: 18, offset: 6 }}>
<Button onClick={this.add} style={{ marginRight: 8 }}>add good friend</Button>
</Form.Item>
</Form>
</Modal>
</p>
);
},
});
var PostForm = Form.create()(formClass);
module.exports = PostForm;
你可以先试着在你你贴出的代码的第二行console.log(getFieldDecorator)一下,以确定这是一个实际存在的函数
另外是因为segmentfault贴图片太简单了还怎么的,全都喜欢截图贴代码,别人帮你改代码还要手打一遍吗?
getFieldDecorator 是 antd@2 引入的,确认下你使用的 antd 版本。