offsetHeight 元素显示高度,scrollHeight 元素完全展开的高度
useLayoutEffect(() => { // 获取dom元素 if (descriptionRef.current?.offsetHeight) {
const content = descriptionRef.current;
if (content?.scrollHeight > content?.offsetHeight) { setShowViewMoreBtn(true); }
else if (content?.scrollHeight < content?.offsetHeight) { setShowViewMoreBtn(false); } } });
antd Paragraph 里边不能写元素,否则不起作用,只能是纯文本,不能保留换行的格式
<Paragraph ellipsis={ellipsis ? { rows: 2, expandable: true, symbol: 'more' } : false}> {content}
antd Form 校验时机
用户一边输入一边校验----onChange;
单个表单输入完毕,输入框失去焦点以后校验----onBlur;
所有表单都输入完毕,点击提交或者下一步时校验----onSubmit;
validateFirst 当某一规则校验不通过时,是否停止剩下的规则的校验。设置 parallel(默认) 时会并行校验,多个规则使用
<Form.Item name="password" validateFirst={true} rules={[ { message: &lt;span class="katex-error" title="ParseError: KaTeX parse error: Expected 'EOF', got '}' at position 52: &hellip;rue, }̲, { &hellip;"&gt;t("此项不能为空"), required: true, }, { required: true, type: "string", pattern: /(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])/, min: 8, max: 20, message:&amp;nbsp;t("密码8-20位字符,必须包含大小写字母和数字"), }, ]} &amp;gt;
一项一项校验表单,错误直接不校验后边
const validateOneReturn = async () => { let values = {}; const names = await form.getFieldsValue(); for (let key in names) { form.setFields([ { name: [key], errors: [], }, ]); } for (let key in names) { if ( (activeTab === 0 && key == "phone") || (activeTab === 1 && key == "email") ) { } else { let value = await form.validateFields([key]); values = { ...values, ...value }; } } return values; };
antd 挂载到父元素
getPopupContainer={(triggerNode) => {return triggerNode.parentNode as HTMLElement}}
Modal下 getContainer={false} 挂载在当前节点位置
全角半角正则
半角正则表达式:/[\x00-\xff]/g 全角正则表达式:/[^\x00-\xff]/g
//密码去掉默认小眼睛
input[type="password"]::-ms-reveal{ display:none }
input[type="password"]::-webkit-input-safebox-button{ display: none; }
react Input onchange event ts
<Input onChange={searchOnChange}
const searchOnChange = (e: React.ChangeEvent<HTMLInputElement>)
click event
React.MouseEvent<HTMLDivElement>
focus blur
React.FocusEvent