react-final-form-hooks 基本使用

废话不多说，直接上代码！

import React, { useState, useEffect, useCallback, Fragment } from 'react';
import {
  Form,
  Input,
  Button,
} from '@/@tencent/tea-component';
import { useForm, useField } from 'react-final-form-hooks';
const FinalFrom: React.FC<Props> = React.memo((props) => {
    // 表单初始值
    const [formValues, setFromValues] = useState({
        roleName: '',
    });
    // 目标字段校验函数
    const fieldValidate = useCallback((val: string) => {
        // 报错信息
        let msg: any = undefined;
        // 校验条件
        if (val.length === 0) {
          msg = '请输入岗位名称';
        }
        if (val.length > 10) {
          msg = '最多输入10个汉字';
        }
        return msg;
      }, []);
    const { form, handleSubmit, validating, submitting } = useForm({
    onSubmit,
    /**
     * 默认为 shallowEqual
     * 如果初始值有多层，会导致重渲染，也可以使用 `useEffect` 设置初始值：
     * useEffect(() => form.initialize({ }), []);
     */
    initialValuesEqual: () => true,
    initialValues: formValues, // 把相关字段，塞入表单
    validate: ({ roleName, description }) => ({
      roleName: fieldValidate(roleName), // 绑定目标字段校验方法
    }),
  });
  // 可用于数据回显的方法
  useEffect(() => form.initialize(formValues), [form, formValues]);
  // 声明目标字段
  const roleName = useField('roleName', form);
  // 保存按钮响应事件
  function onSubmit(values: Object) {
       // values 表单相关值(用户输入的字段formValues)
  }
  // 获取目标字段用户输入值状态，是否符合报错条件
  const getStatus = useCallback((meta: any, validating: Boolean) => {
    if (meta.active && validating) {
      return 'validating';
    }
    if (!meta.touched) {
      return;
    }
    return meta.error ? 'error' : 'success';
  }, []);
  
    return (
    <div>
        <form onSubmit={handleSubmit}>
          <Form layout="default" style={{ width: '100%' }}>
            <Form.Item
              label="岗位名称"
              status={getStatus(roleName.meta, validating)}
              message={
                (getStatus(roleName.meta, validating) === 'error' && roleName.meta.error) ||
                '最多输入10个汉字'
              }
            >
              <Input
                {...roleName.input}
                placeholder="请输入岗位名称"
                autoComplete="off"
              />
            </Form.Item>
          </Form>
          <Form.Action>
            <Button type="primary" htmlType="submit" loading={submitting} disabled={validating}>
                保存
              </Button>
            <Button htmlType="button" }>
              取消
            </Button>
          </Form.Action>
        </form>
    </div>
});
export default FinalFrom

虽然为了这一个输入框，就要写这么多代码。但感觉还是很值得的，当你被产品怼的时候，当你在写if...else..的时候

ps:代码中使用到的tea-component是腾讯内部ui框架，网上搜不到，其实不用这个框架也可以