antd ts

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: &amp;lt;span class="katex-error" title="ParseError: KaTeX parse error: Expected 'EOF', got '}' at position 52: &amp;hellip;rue, }̲, { &amp;hellip;"&amp;gt;t("此项不能为空"), required: true, }, { required: true, type: "string", pattern: /(?=.*[a-z])(?=.*[A-Z])(?=.*[0-9])/, min: 8, max: 20, message:&amp;amp;nbsp;t("密码8-20位字符,必须包含大小写字母和数字"), }, ]} &amp;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

posted @ 2024-03-08 17:24  红苹果学园  阅读(10)  评论(0编辑  收藏  举报