Реактивная проверка формы машинного дизайна муравья не работает - PullRequest
Новая
       17

Реактивная проверка формы машинного дизайна муравья не работает

0 голосов
/ 25 февраля 2020

Я использовал реакцию машинописного проекта на дизайн муравья, и я использовал проверку формы дизайна муравья , но он работает неправильно, кто-нибудь знает, как решить эту проблему? Спасибо

git за эту ошибку

index.tsx? 789d: 32 Uncaught 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>


            );
        }
    }

1 Ответ

1 голос
/ 25 февраля 2020

Поскольку реквизиты форм по умолчанию не назначены с их типами, 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;
...