Antd form表单的使用、设值、取值、清空值方式

Antd form表单的使用、设值、取值、清空值

1、使用

{this.props.form.getFieldDecorator("key",{})(<Input />)}

3、设值

this.props.form.setFieldsValue({
    key: '123',
});

2、取值

this.props.form.validateFields((err, values) => {
    if (!err) {
       console.log("表单信息", values);
    }
});

3、清空值

this.props.form.resetFields();

antd中的form表单用法笔记

这是我的表单结构,引用的antd中的Form表单,里面有四个From.Item

(这里的Row,Col可以忽略,因为我包个外层结构好布局样式)

我的需求

1.在此处点击添加是需要收集到这个skuId ,以这个skuId为参数去调用接口,去匹配拿到到一组数据,展示到下面的表格中.   

收集某个From.Item中的数据用到的方法getFieldsValue,

拿值怎么拿,需要把From定义成一个可控组件,也就是给它加一个ref,通过标签获取它上面的值,看代码

这两步就可以给标签添加一个ref,名字为formRef

再通过ref调用Form身上的方法,这里这个setFieldsValue('对应的字段名字'),就可以拿到对应的值

2.同样的setFieldsValue('字段名')可以设置它的值,

比如, 你点的编辑按钮进入的页面,进来需要重新编辑这些数据,就可以用到这个方法

3.最后就是表单提交使用validateFields()的方法

每个From.Item里面可以通过rules设置验证规则

提交的时候就会触发

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。