背景
没想到官方没有提供纯粹的带错误提示的输入框，官方提供了启用错误样式 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;
}
}
效果:
讨论
和官方的差别：
- 官方在父容器上允许溢出，这样显示错误信息时不会像我这样推动下面的元素
- 官方的消失动画是等动画结束再卸载组件，所以官方的错误信息消失时会更自然一些。
关于动画结束再卸载组件其实也是一个话题，我练手时用的 Vue 的 Transition 组件，它提供了六个动画相关的类来实现入场和退场动画，然后 React 自然也有类似的。我对这个动画结束再卸载的技术调研过一次，最终结论是他们都是依赖底层浏览器提供的动画事件。是的，浏览器原生就有相关的事件提供，比如你可以监听一个函数一次 CSS 动画什么时候结束。所以如果写原生 JS 的话，就是监听这个结束事件，在事件响应里面移除动画元素就行。但是用 Vue 或这 React 这种库时，就要官方有没有提供接口出来了。
