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

Question

我正在React中工作一个基于类的组件，我的代码看起来很好，但即使它显示了一些语法错误。——比;不能解构this.props的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

Answer 1

这里的问题是，您正在使用的代码应该在自己的表单组件。你试图从this.props.form得到getFieldDecorator。但是你的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);