蚂蚁设计表格:对自己的组件的验证错误

时间:2020-05-26 07:20:05

标签: reactjs forms validation ant-design-pro

我在关于验证的蚂蚁设计表格方面遇到了问题。只要我将表单字段直接包含在表单中,对我所需的选择字段的验证就会按预期进行。当我将相同的选择字段提取到自己的组件中时,验证无法按预期进行:提交带有空选择字段的表单会显示一条错误消息。当我从表单字段中选择一个值时,该消息不再消失。

如果您能帮助我解决问题并了解我在做什么错,我将不胜感激。

这是我的代码:

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;

感谢和亲切问候

Balu

0 个答案:

没有答案