ant Form 表单作为子组件

最新推荐文章于 2023-12-04 16:19:40 发布

原创

最新推荐文章于 2023-12-04 16:19:40 发布 · 1.2k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#ant design pro #form表单

子组件中代码：

class FormName extends React.Component {
    constructor(props) {super(props); }
    render() {
        const { getFieldDecorator } = this.props.form;
        const formItemLayout = {
            labelCol: {
              xs: { span: 24 },
              sm: { span: 7 },
            },
            wrapperCol: {
              xs: { span: 24 },
              sm: { span: 12 },
              md: { span: 16 },
            },
          };
        return(
            <Form>
              <FormItem {...formItemLayout} style={
  
  { width: 220 }}
                label="名称"
              >
                {getFieldDecorator('xxxxx', {
                  initialValue:'',
                  validateFirst: true,
                  rules: [
                    {required: true, message: '不能为空'},
                    {max: 100, message: '不要超过100字',},
                  ],
                })(<Input   />)}
              </FormItem>