如何将fieldDecorator解析为React中的组件

时间:2016-12-20 11:39:39

标签: javascript reactjs

我使用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>
    )
  }
}

0 个答案:

没有答案