TypeError：无法读取未定义 ReactJS 的属性“validateFields”答案

【问题标题】：TypeError: Cannot read property 'validateFields' of undefined ReactJSTypeError：无法读取未定义 ReactJS 的属性“validateFields”
【发布时间】：2019-05-07 19:30:06
【问题描述】：

我有两个页面 addressForm.js 和 index.js。在 addressForm.js 页面中编写了 Form 的代码。示例代码如下所示。

<Col >
                    <div style={{'height': '45px','display':'flex'}}> 
                    <label style={{'color': '#f5222d', 'paddingTop': '10px','fontFamily': 'SimSun'}}>*</label>&nbsp;
                    <label style={{'width':'74px','paddingTop':'8px'}}>Customer Name:</label>                       
                        <FormItem >
                        {getFieldDecorator('Name', {
                        initialValue: '',
                        rules: [{
                            required: true, 
                            message: (
                              <Tooltip
                                visible={true} placement="topRight"
                                title="Please Input Customer Name"
                              />
                            ),
                        }],
                        })(
                        <Input placeholder="Customer Name" style={{'width':'164px'}} onChange={(e)=>{e.preventDefault(); e.stopPropagation();                                   
                            this.handleChange(0,e, 'Name')}}/>
                        )}                    
                    </FormItem>
                    </div>
                    </Col>

在 index.js 页面中写入表单功能（单击提交按钮时会发生什么）。示例代码：

handleOk = () => {
    this.props.form.validateFields((err, values) => {
        if (!err) {
          /* Code.......*/
 }
    });
    }

问题是验证不起作用（即，验证检查未完成，我收到此错误）。

我应该在 index.js 页面中导入任何内容以避免错误吗？

【问题讨论】：

你遇到了什么错误？
TypeError: 无法读取未定义 ReactJS 的属性 'validateFields'
this.props.form 未定义。你能检查一下吗...stackoverflow.com/questions/41296668/…

标签： reactjs forms validation antd

【解决方案1】：

您可以通过尝试以下代码来解决此问题：

class Devices extends React.Component {
   .................
}

Devices = Form.create({})(Devices);
export default Devices;

【讨论】：

【解决方案2】：

从documentation开始，form应该被Form.create装饰。

如果表单已被 Form.create 修饰，则它具有 this.props.form 属性。

class CustomizedForm extends React.Component {}

CustomizedForm = Form.create({})(CustomizedForm);

【讨论】：

【解决方案3】：

你的 props 中的某些东西没有被传入或定义不正确，这会导致 TypeError。看起来您可能需要将 props 显式传递到您的 handleOk 函数中——尽管使用提供的 sn-ps 很难分辨。

【讨论】：