React组件开发实战-HiddenInput

需求背景

在实际项目开发项目中开发表单的需求时候, 会遇到一个场景. 我们或通过接口获取表单数据, 然后简单处理后直接赋值给表单, 提交的时候直接从表单取值就行. 正常的数据问题不大, 但当遇到一些需要隐藏, 不需要展示但却是必须要的值, 比如说是某某类型, 这个类型根据场景自动给. 通常做法是直接给个<input type='hidden' />就行. 但是遇到对象类型的数据, 那就有些麻烦了.
其实这个问题超级简单, 封装个组件就解决了.

设计API

// 已 Antd 表单举例
const handleSubmit = (values) => {
  console.log(values.needHiddenValue);
}

return (
  <Form form={form} onFinish={handleSubmit}>
    <Form.Item name="needHiddenValue" noStyle>
      {/* Form.Item 会代理子组件(HiddenInput) 的 value, onChange, initialValue */}
      <HiddenInput />
    </Form.Item>
  </Form>
)

这个是我期望的样子, 撸起袖子开始干

实现

因为组件的 props 本身就支持对象, 我们封装一个空组件, 继承 value 属性就可以了.

import { useImperativeHandle, forwardRef, ForwardRefRenderFunction } from 'react';

export interface Props {
  value: any;
}

const HiddenInput: ForwardRefRenderFunction<any, Props> = ({ value }, ref) => {
  // 不加 forwardRef 的话, ant3 会报一个警告
  useImperativeHandle(
    ref,
    () => ({
      value,
    }),
    [value],
  );

  return null;
};

HiddenInput.displayName = 'HiddenInput';

export default forwardRef(HiddenInput);

水了一篇文章 [有礼貌的尴尬一笑].
这个组件主要就是解决 <input type="hidden" /> 不能接受对象类型的数据, 影响表单完整的取值赋值操作的一个简单操作.