Question

我将react typescript项目用于蚂蚁设计，并且使用了ant design form validation，但是它无法正常工作，有人知道如何解决该问题吗？谢谢

git这个错误

index.tsx？789d：32未捕获的TypeError：无法读取属性未定义的“ getFieldDecorator”

import * as React from "react";
    import { Input, Form, Icon,  Button, } from "antd";
    import 'antd/dist/antd.css';
    import "./style.css";



    export class Registerform extends React.Component<any> {
        handleSubmit = (e:any) => {
            e.preventDefault();
            this.props.form.validateFieldsAndScroll((err:any, values:any) => {
                if (!err) {
                    console.log('Received values of form: ', values);
                }
            });
        };




        render() {

            const { getFieldDecorator } = this.props.form;
            return (
                /* Start add bulk upload form*/
                <div className="remindersform-section">

                    <Form onSubmit={this.handleSubmit}>


                        <Form.Item
                            label={
                                <span>
                  Nickname&nbsp;

                    <Icon type="question-circle-o" />

                </span>
                            }
                        >
                            {getFieldDecorator('nickname', {
                                rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
                            })(<Input />)}
                        </Form.Item>



                        <Form.Item >
                            <Button type="primary" htmlType="submit">
                                Register
                            </Button>
                        </Form.Item>
                    </Form>
                </div>


            );
        }
    }

Answer 1

由于未为默认表单道具分配类型，因此antd提供了解决方案，请尝试以下方式

import * as React from "react";
import { FormComponentProps } from "antd/es/form";
import { Input, Form, Icon,  Button, } from "antd";
import 'antd/dist/antd.css';

interface UserFormProps extends FormComponentProps {
    form: any;
}

class Registerform extends React.Component<UserFormProps> {
    handleSubmit = (e:any) => {
        e.preventDefault();
        this.props.form.validateFieldsAndScroll((err:any, values:any) => {
            if (!err) {
                console.log('Received values of form: ', values);
            }
        });
    };




    render() {

        const { getFieldDecorator } = this.props.form;
        return (
            /* Start add bulk upload form*/
            <div className="remindersform-section">

                <Form onSubmit={this.handleSubmit}>


                    <Form.Item
                        label={
                            <span>
                  Nickname&nbsp;

                                <Icon type="question-circle-o" />

                </span>
                        }
                    >
                        {getFieldDecorator('nickname', {
                            rules: [{ required: true, message: 'Please input your nickname!', whitespace: true }],
                        })(<Input />)}
                    </Form.Item>



                    <Form.Item >
                        <Button type="primary" htmlType="submit">
                            Register
                        </Button>
                    </Form.Item>
                </Form>
            </div>


        );
    }
}



const WrappedForm = Form.create<UserFormProps>({})(Registerform);

export default WrappedForm;

React ant设计打字稿表格验证不起作用

1 个答案: