Форма Ant Design: неправильная проверка собственного компонента - PullRequest
Новая
       26

Форма Ant Design: неправильная проверка собственного компонента

0 голосов
/ 26 мая 2020

У меня проблема с формой дизайна муравья относительно проверки. Пока я включаю поле формы непосредственно в форму, проверка требуемого поля выбора работает должным образом. Когда я извлекаю то же поле выбора в собственный компонент, проверка не работает должным образом: при отправке формы с пустым полем выбора отображается сообщение об ошибке. Когда я выбираю значение в поле формы, сообщение больше не исчезает.

Я был бы признателен, если бы вы помогли мне решить проблему и понять, что я делаю неправильно.

Вот мой код: 

import React from "react";
import { Button, Form, Select} from "antd";

class MyForm extends React.Component {
    render() {
        const { getFieldDecorator } = this.props.form;
        const { Option } = Select;

        return (
            <div className="form-cmp" style={{width: 450}}>
                <Form onSubmit={this.onSubmit}>
                    <Form.Item label="Country">
                        {getFieldDecorator('country', {
                            rules: [
                                {
                                    required: true,
                                    message: 'Please select your country',
                                },
                            ],
                        })(
                        <Country />
                        )}
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit">Submit</Button>
                    </Form.Item>
                </Form>
            </div>
        );
    }
}
export default Form.create()(MyForm);

import React from 'react';
import 'antd/dist/antd.css';
import {Select} from 'antd';

const { Option } = Select;

class Country extends React.Component {
    state = {
        country: ''
    }

    render() {
        return (
            <Select
                showSearch
                placeholder="Select your Country"
                optionFilterProp="children"
                filterOption={(input, option) =>
                    option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
                }
            >
                <Option value="France">France</Option>
                <Option value="Spain">Spain</Option>
                <Option value="Great Britain">Great Britain</Option>
                <option value="Other">Other</option>
            </Select>

        );
    }
}

export default Country;

С уважением и уважением

Балу

...