Ant 设计：getFieldDecorator()

Posted 2023-03-07

【中文标题】Ant 设计：getFieldDecorator()

【英文标题】：Ant Design : getFieldDecorator()

【发布时间】：2019-08-02 01:44:00

【问题描述】：

import 
 Form, Input, Tooltip, Icon
 from 'antd';
 import React , Component from 'react';
import ReactDOM from 'react-dom';

export default class RegistrationForm extends Component 
     state = 
     confirmDirty: false,
     autoCompleteResult: [],
     ;

     handleSubmit = (e) => 
         e.preventDefault();
         this.props.form.validateFieldsAndScroll((err, values) => 
         if (!err) 
            console.log('Received values of form: ', values);
          
       );
       

     handleConfirmBlur = (e) => 
         const value = e.target.value;
         this.setState( confirmDirty: this.state.confirmDirty || !!value                
         );
         

        render() 
           console.log(this.props.form)
             const  getFieldDecorator  = this.props.form;

             const formItemLayout = 
             labelCol: 
                   xs:  span: 24 ,
                   sm:  span: 8 ,
                 ,
              wrapperCol: 
                  xs:  span: 24 ,
                  sm:  span: 16 ,
              ,
             ;

return (
  <Form ...formItemLayout onSubmit=this.handleSubmit>
    <Form.Item
      label="E-mail"
      >
      getFieldDecorator('email', 
        rules: [
          type: 'email', message: 'The input is not valid E-mail!',
        , 
          required: true, message: 'Please input your E-mail!',
        ],
      )(
        <Input />
        )
    </Form.Item>

    <Form.Item
      label=(
        <span>
          Nickname&nbsp;
          <Tooltip title="What do you want others to call you?">
            <Icon type="question-circle-o" />
          </Tooltip>
        </span>
      )
      >
      getFieldDecorator('nickname', 
        rules: [ required: true, message: 'Please input your nickname!', whitespace: true ],
      )(
        <Input />
        )
    </Form.Item>
  </Form>
);
  
   

我正在使用ant design，但是当我运行此代码时，它显示this.props.form is undefined。在这一行中，当我在 render 函数中声明 getFieldDecorator 时。

请问这些道具是从哪里来的以及如何使用呢？我没有任何传递任何prop 的父组件。帮助修复它。提前致谢。

【参考方案1】：

请像这样导出您的组件

export default Form.create()(RegistrationForm)

【参考方案2】：

你应该像这样导出一个类：

export default Form.create()(RegistrationForm)

form 对象会通过这种方式注入到 props 中。

【参考方案3】：

我是这样用的

const WerappedRegistration = Form.create( name: 'registrationform' )(RegistrationForm);
export default WerappedRegistration;