搜索
node.js - ant-design的组件报错 getFieldDecorator不是function
PHP中文网
PHP中文网 2017-04-17 15:14:54
[Node.js讨论组]

到页面上展示:

报错:
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;
PHP中文网
PHP中文网

认证0级讲师

全部回复(2)
大家讲道理

你可以先试着在你你贴出的代码的第二行console.log(getFieldDecorator)一下,以确定这是一个实际存在的函数

另外是因为segmentfault贴图片太简单了还怎么的,全都喜欢截图贴代码,别人帮你改代码还要手打一遍吗?

阿神

getFieldDecorator 是 antd@2 引入的,确认下你使用的 antd 版本。

热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号