antd-form表单操作

1、格式

<Form  onSubmit={this.handleSubmit.bind(this)}>

     <FormItem {...formItemLayout} lable="名称">

             {getFieldDecorator('name', {

                   rules:[{required:true,message:'名称不能为空',}],})(

                          <Input />

               )}

      </FormItem>

</Form>

onSubmit:提交,可以获取到表单中所有的数据

formItemLayout:面板设置,响应式布局,设置列

getFieldDecorator:用于和表单进行双向绑定,不需要绑定state,不需要设置value={},也不需要设置onChange={},

rules:各种验证规则,required:设置为true,必须,false非必需

const{getFieldDecorator}=this.props.form;

const formItemLayout={

       labelCol:{

          xs:{span:24},

         sm:{span:6},

      },

      wrapperCol:{

            xs:{span:24},

            sm:{span:14},

      },

};

constEditLargeSize=Form.create({

  当Form.Item子节点的值发生改变时触发,可以把对应的值转存到 Redux store

     onFieldsChange(props,changedFields) {

    },

  把 props 转为对应的值,可用于把 Redux store 中的值读出,可以在此给form赋值

   mapPropsToFields(props) {

    }

任一表单域的值发生改变时的回调

    onValuesChange(_,values) {}

});

exportdefaultEditLargeSize;

使用form的好处:

1、能直接在提交按钮中获取form中的所有值

2、不需要额外写校验函数

3、不需要写onChange函数

4、编辑的时候只需要在mapPropsToFields方法里面给相应的formItem赋值就可以了,不需要写onChange方法,在最后的按钮中一样能获取所有改变过后的值。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容