本文主要是介绍AntDesign React 简单封装一个带错误提示的输入框，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
背景
没想到官方没有提供纯粹的带错误提示的输入框，官方提供了启用错误样式 status 属性。但是展示错误信息提示却需要捆绑Form 和 Form.Item。说实话有点不友好，我就一个简单的输入框，想要用户输入时用正则校验，错误时提示一些错误信息。然后表单数据就这么一个输入，完全没必要写一整个Form 来管理提交数据，为了这一个输入对接 Form 那一堆 API 属实是水代码。
加一个错误提示也不难，写点小动画体验就已经很好了。至于要不要单独封装放到 NPM，嗯感觉是个哲学问题。像是 classnames 这种工具代码就一点点代码，但是放到 NPM 供大家使用就很方便。
废话说完，上代码
代码
用法：
<InputWithErrorclassName={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}><divclassName={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 这种库时，就要官方有没有提供接口出来了。
这篇关于AntDesign React 简单封装一个带错误提示的输入框的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
