时间戳

首页 > 解决方案 > 如何解决此错误无法解构“this.props.form”的属性“getFieldDecorator”，因为它未定义

reactjs - 如何解决此错误无法解构“this.props.form”的属性“getFieldDecorator”，因为它未定义

问题描述

我正在使用 React 中基于类的组件，我的代码看起来不错，但即使它显示了一些这样的语法错误。--> 无法解构“this.props.form”的属性“getFieldDecorator”，因为它未定义。

所以请帮助我如何解决这个问题

这是 App.js

import React, { Component } from "react";
import 'antd/dist/antd.css';
import { Form, Input, Button, Card, DatePicker, } from "antd";

class App extends Component {
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <Card>
        <Form onSubmit={this.handleSubmit} className="login-form">
            <Form.Item>
              {getFieldDecorator("roomno", {
                // initialValue: keyData && keyData.room_no,
                rules: [{ required: true, message: "Please input your room no!" }],
              })(
                <Input
                  name="roomNumber"
                  style={{ width: 300 }}
                  placeholder="Room No"
                />,
              )}
            </Form.Item>

            <Form.Item>
              {getFieldDecorator("date-picker1", {
                rules: [{ required: true, message: "Please input your Checkin date" }],
              })(<DatePicker placeholder="Checkin date" style={{ width: 300 }} />)
              }
            </Form.Item>

            <Form.Item>
              {getFieldDecorator("date-picker2", {
                rules: [{ required: true, message: "Please input your Checkout date" }],
              })(<DatePicker placeholder="Checkout date" style={{ width: 300 }} />)
              }
            </Form.Item>
            <Form.Item>

              {getFieldDecorator("noOfKeys", {
                rules: [{ required: true, message: "Please input your key!" }],
              })(
                <Input
                  type="number"
                  style={{ width: 300 }}
                  placeholder="No of Keys"
                />,
              )}
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                Submit
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }
}

export default App

标签： reactjs

解决方案

这里的问题是您使用的代码应该在它自己的表单组件中。你正试图getFieldDecorator从this.props.form. 但是您App没有属性，因为它是您的应用程序的根。

因此，您需要创建一个自定义 Form 组件，并Form.create()在导出组件时使用。

看看这个例子。

import React from 'react';
import { Form, Input, Button, Card, DatePicker } from "antd";

class LoginForm extends React.Component {
  render() {
    const { getFieldDecorator } = this.props.form;
    return (
      <div>
        <Card>
        <Form onSubmit={this.handleSubmit} className="login-form">
            <Form.Item>
              {getFieldDecorator("roomno", {
                // initialValue: keyData && keyData.room_no,
                rules: [{ required: true, message: "Please input your room no!" }],
              })(
                <Input
                  name="roomNumber"
                  style={{ width: 300 }}
                  placeholder="Room No"
                />,
              )}
            </Form.Item>

            <Form.Item>
              {getFieldDecorator("date-picker1", {
                rules: [{ required: true, message: "Please input your Checkin date" }],
              })(<DatePicker placeholder="Checkin date" style={{ width: 300 }} />)
              }
            </Form.Item>

            <Form.Item>
              {getFieldDecorator("date-picker2", {
                rules: [{ required: true, message: "Please input your Checkout date" }],
              })(<DatePicker placeholder="Checkout date" style={{ width: 300 }} />)
              }
            </Form.Item>
            <Form.Item>

              {getFieldDecorator("noOfKeys", {
                rules: [{ required: true, message: "Please input your key!" }],
              })(
                <Input
                  type="number"
                  style={{ width: 300 }}
                  placeholder="No of Keys"
                />,
              )}
            </Form.Item>
            <Form.Item>
              <Button type="primary" htmlType="submit" className="login-form-button">
                Submit
              </Button>
            </Form.Item>
          </Form>
        </Card>
      </div>
    )
  }
}

LoginForm.propTypes = propTypes;

export default Form.create()(LoginForm);

推荐阅读