我使用antd创建表单并使用fieldDecorator来装饰各种表单元素,这些元素稍后会给我一些额外的功能。 一切正常但我想在单独的文件/组件中创建FormItems,并且不知道如何将其解析为新的组件类。
到目前为止,这是我的代码,但是如何在单独的组件中提取和使用现有的fieldDecorator,例如ProcessSelect组件。
class ZalosForm extends React.Component {
constructor(...args) {
super(...args);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
e.preventDefault();
this.props.form.validateFields((err, values) => {
if (!err) {
console.log('Received values of form: ', values);
}
})
}
render() {
const { getFieldDecorator } = this.props.form;
const formItemLayout = {
labelCol: { span: 6 },
wrapperCol: { span: 14 }
};
return (
<div>
<Form inline style={{ marginTop: 10, marginBottom: 10 }} onSubmit={this.handleSubmit}>
<FormItem
{...formItemLayout}
hasFeedback
>
{getFieldDecorator('qualityLabel', {
rules: [{
min: 11, max: 11, message: 'Invalid QL'
}]
})(
<Input style={{ width: '200px' }} size="default" placeholder="QL" />
)}
<FormItem>
<ProcessSelect />
</FormItem>
<FormItem>
<ButtonGroup size="default">
<Button htmlType="submit" size="default" icon="search" onSubmit={this.handleSubmit} />
<Button size="default" icon="close" />
</ButtonGroup>
</FormItem>
</Form>
</div>
)
}
}