我在关于验证的蚂蚁设计表格方面遇到了问题。只要我将表单字段直接包含在表单中,对我所需的选择字段的验证就会按预期进行。当我将相同的选择字段提取到自己的组件中时,验证无法按预期进行:提交带有空选择字段的表单会显示一条错误消息。当我从表单字段中选择一个值时,该消息不再消失。
如果您能帮助我解决问题并了解我在做什么错,我将不胜感激。
这是我的代码:
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