AntDesign React 简单封装一个带错误提示的输入框

背景

没想到官方没有提供纯粹的带错误提示的输入框，官方提供了启用错误样式 status 属性。但是展示错误信息提示却需要捆绑Form 和 Form.Item。说实话有点不友好，我就一个简单的输入框，想要用户输入时用正则校验，错误时提示一些错误信息。然后表单数据就这么一个输入，完全没必要写一整个Form 来管理提交数据，为了这一个输入对接 Form 那一堆 API 属实是水代码。

加一个错误提示也不难，写点小动画体验就已经很好了。至于要不要单独封装放到 NPM，嗯感觉是个哲学问题。像是 classnames 这种工具代码就一点点代码，但是放到 NPM 供大家使用就很方便。

废话说完，上代码

代码

用法：

<InputWithError
   className={css.urlInput}
   placeholder="输入 URL "
   size="large"
   value={urlInput}
   onChange={handleURLInputChange}
   errorMsg={urlInput.length ? "测试数据" : ""}
/>

InputWithError/index.tsx：

import { Input, InputProps } from "antd";
import React from "react";
import css from "./index.module.scss";
import classNames from "classnames";

const InputWithError: React.FC<{ errorMsg?: string } & InputProps> = function (
	props
) {
	return (
		<div className={props.className}>
			<Input {...{...props, className: "", status: props.errorMsg ? "error" : ""}} />
			<div className={css.hintContainer}>
				<div
					className={classNames(
						css.text,
						props.errorMsg ? css.show : css.hide
					)}
				>
					{props.errorMsg}
				</div>
			</div>
		</div>
	);
};

export default InputWithError;

index.module.scss

.hintContainer {

    overflow-y: hidden;

    .text {
        transition: height .4s,
                    color .4s;
    }

    .text.hide {
        height: 0px;
        color: transparent;
    }

    .text.show {
        height: 24px;
        color: #ff4d4f;
    }
    
}

效果:

讨论

和官方的差别：

1. 官方在父容器上允许溢出，这样显示错误信息时不会像我这样推动下面的元素
2. 官方的消失动画是等动画结束再卸载组件，所以官方的错误信息消失时会更自然一些。

关于动画结束再卸载组件其实也是一个话题，我练手时用的 Vue 的 Transition 组件，它提供了六个动画相关的类来实现入场和退场动画，然后 React 自然也有类似的。我对这个动画结束再卸载的技术调研过一次，最终结论是他们都是依赖底层浏览器提供的动画事件。是的，浏览器原生就有相关的事件提供，比如你可以监听一个函数一次 CSS 动画什么时候结束。所以如果写原生 JS 的话，就是监听这个结束事件，在事件响应里面移除动画元素就行。但是用 Vue 或这 React 这种库时，就要官方有没有提供接口出来了。