antd3 -- antd4 api差异之form组件

一.form组件

1.使用方式

1.antd3 使用需要注册 
 .....
 const WrappedHorizontalLoginForm = Form.create({ name: 'horizontal_login' })(HorizontalLoginForm);
 
2.antd4  
 无需注册直接使用

2.antd 4 api

1.form  
  使用： const [form] = Form.useForm(); 创建form对象
  from 示例对象：
    {
    getFieldValue: ƒ (name)                     //获取对应字段名的值
    getFieldsValue: ƒ (nameList, filterFunc)    //获取一组字段名对应的值，会按照对应结构返回
    getFieldError: ƒ (name)                     //获取对应字段名的错误信息
    getFieldsError: ƒ (nameList)                //获取一组字段名对应的错误信息，返回为数组形式
    isFieldsTouched: ƒ ()                      //检查一组字段是否被用户操作过，allTouched 为 true 时检查是否所有字段都被操作过
    isFieldTouched: ƒ (name)                  //检查对应字段是否被用户操作过
    isFieldValidating: ƒ (name)               //检查一组字段是否正在校验
    isFieldsValidating: ƒ (nameList)          //  ?? 
    resetFields: ƒ (nameList)                //重置一组字段到 initialValues
    setFields: ƒ (fields)                   //设置一组字段状态
    setFieldsValue: ƒ (store)               //设置表单的值
    validateFields: ƒ (nameList, options)    //触发表单验证
    submit: ƒ ()                             //提交表单，与点击 submit 按钮效果相同
    getInternalHooks: ƒ (key)                // ??
     __INTERNAL__: {name: "control-hooks"}
     scrollToField: ƒ scrollToField(name)    //滚动到对应字段位置
    }
  创建之后直接可以调用实例对象的方法：如：
     form.resetFields() // 重置form字段
     
  api区别
    getFieldValue()
     此函数如果不传字段名，获取的是全部的form值，如果传入值则获取对应的值
   getFieldsValue
     此函数不管是否传值，获取的都是全部的form值  
   getFieldError
    获取对应字段名的错误信息
   getFieldsError
     此接口不可传入参数，否则报错
   isFieldTouched
     检查对应字段是否被用户操作过 ,返回 boolean
   isFieldsTouched(nameList,allTouched)
     检查所有字段是否被用户操作，如果不传入第二个参数，只要用户操作其中一个就会返回true，传入第二个参数所有字段都操作过才会返回true
   isFieldValidating
      此函数只有在validateFields() 调用之后才会有效，传入字段名，如果不传值直接返回false

2.scrollToFirstError / scrollToField

2.1 scrollToFirstError
作用：提交失败自动滚动到第一个错误字段
注意：必须使用表单submit 提交才会触发，滚动到相应的报错位置
     但是是直接将 ant-form-item  整个Form.Item滚动到父级顶部，而且如果使用layout布局的话直接会被header遮盖，无法显示出滚动区域
 
2.2 scrollToField
如果不使用表单submit提交,自定义提交函数滚动方式如下：
 const submit = async() =>{
    try {
      const values = await form.validateFields();
      console.log('Success:', values);
    } catch (errorInfo) {        //返回报错信息，滚动到第一个报错的位置
      form.scrollToField(errorInfo.errorFields[0].name.toString())
    }
  }
 此方式与同上，滚动位置不太准确 

最后

以上就是等待哈密瓜为你收集整理的antd3 -- antd4 api差异之form组件的全部内容，希望文章能够帮你解决antd3 -- antd4 api差异之form组件所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。