Проверка из формы AntDesign не работает с onChange - PullRequest
Новая
       47

Проверка из формы AntDesign не работает с onChange

1 голос
/ 18 марта 2020

Проверка в форме AntDesign ссылается на тот же атрибут имени, что и onChange после отправки. Если я удаляю атрибут name из тега Form.Item, очистка формы работает, но она не проверяется. Как я могу изменить свой код onChange, чтобы избежать конфликта с проверкой AntDesign?

Это код onChange: 

const onChange = e =>
        setContact({ ...contact, [e.target.name]: e.target.value });

Это полный код формы: 

import React, { useState } from 'react';
import 'antd/dist/antd.css';
import { Form, Input, Button } from 'antd';

const layout = {
    labelCol: {
        span: 15,
    },
    wrapperCol: {
        offset: 2,
        span: 15,
    },
};
const tailLayout = {
    wrapperCol: {
        offset: 2,
        span: 16,
    },
};

const ContactForm = (props) => {

    const [contact, setContact] = useState({
        name: '',
        email: '',
        phone: '',
    });

    const { name, email, phone } = contact;

    const onChange = e =>
        setContact({ ...contact, [e.target.name]: e.target.value });

    const onSubmit = () => {

        props.AddContact(contact);

        setContact({
            name: '',
            email: '',
            phone: '',
        });
    };

    const onFinishFailed = errorInfo => {
        console.log('Failed:', errorInfo);
    };

    return (
        <Form
            onFinish={onSubmit}
            onFinishFailed={onFinishFailed}
            {...layout}
            name="basic"
            initialValues={{
                remember: true,
            }}
        >
            <Form.Item
                
                rules={[
                    {
                        required: true,
                        message: 'Please input name!',
                    },
                ]}
            >
                <Input
                    name="name"
                    value={name}
                    onChange={onChange}
                    placeholder="Name" />
            </Form.Item>

            <Form.Item
                
                rules={[
                    {
                        required: true,
                        message: 'Please input email!',
                    },
                ]}
            >
                <Input
                    name="email"
                    value={email}
                    onChange={onChange}
                    placeholder="Email" />
            </Form.Item>

            <Form.Item
                
                rules={[
                    {
                        required: true,
                        message: 'Please input phone!',
                    },
                ]}
            >
                <Input
                    name="phone"
                    value={phone}
                    onChange={onChange}
                    placeholder="Phone" />
            </Form.Item>

            <Form.Item {...tailLayout}>
                <Button htmlType="submit">Add Contact</Button>
            </Form.Item>
        </Form>
    );
};

export default ContactForm;
...