visual studio网站开发教程,wordpress 插件 前端,东莞黄江做网站公司,山东省建设安全监督站的网站本篇文章主要介绍一下最近的开发中用到的些小问题。问题不大#xff0c;但有些小细节#xff0c;记录一下#xff0c;有遇到的朋友可以看一下#xff0c;有更好的解决方法欢迎分享。
浏览器记住密码自动填充表单
这个问题我在火狐浏览器遇到了。我登录系统时选择了浏览器…本篇文章主要介绍一下最近的开发中用到的些小问题。问题不大但有些小细节记录一下有遇到的朋友可以看一下有更好的解决方法欢迎分享。
浏览器记住密码自动填充表单
这个问题我在火狐浏览器遇到了。我登录系统时选择了浏览器记住密码然后在打开新建数据库弹窗里面的户名和密码竟然自动填充了。设置了autoComplete“off”,也没有用这个只是为了关闭输入提示。以下时具体的解决方法亲测有效
import React from react;
import { Button, Form, Input } from antd;const MyForm: React.FC () {const [form] Form.useForm();const onFinish (values: any) {console.log(Success:, values);};const onFinishFailed (errorInfo: any) {console.log(Failed:, errorInfo);};/** 清空密码 */const resetPass () {if (!form.isFieldTouched(password)) {form.setFieldsValue({ password: });}};/** 清空用户名 */const resetUser () {if (!form.isFieldTouched(username)) {form.setFieldsValue({ username: });}};return (Formnamebasicform{form}labelCol{{ span: 8 }}wrapperCol{{ span: 16 }}initialValues{{ remember: true }}onFinish{onFinish}onFinishFailed{onFinishFailed}autoCompleteoffForm.ItemlabelIPnameiprules{[{ required: true, message: Please input your ip! }]}Input //Form.ItemForm.ItemlabelPortnameportrules{[{ required: true, message: Please input your port! }]}Input //Form.Item{/* 用于干扰浏览器记住密码 */}Form.Item style{{ display: none }}Input onFocus{resetUser}//Form.ItemForm.Item style{{ display: none }}Input.Password onFocus{resetPass}//Form.ItemForm.ItemlabelUsernamenameusernamerules{[{ required: true, message: Please input your username! }]}Input onFocus{resetUser} //Form.ItemForm.ItemlabelPasswordnamepasswordrules{[{ required: true, message: Please input your password! }]}Input.Password onFocus{resetPass} autoCompleteoff//Form.ItemForm.Item wrapperCol{{ offset: 8, span: 16 }}Button typeprimary htmlTypesubmitSubmit/Button/Form.Item/Form);
};export default MyForm;
具体来说在代码中添加了两个隐藏的Form.Item一个用于用户名Input类型另一个用于密码Input.Password类型然后分别在这两个元素的onFocus事件中调用了resetUser和resetPass函数这两个函数在字段没有被触摸touched过的情况下将字段值设置为空字符串。
这样的做法会使浏览器的自动填充机制失效因为浏览器通常在填充用户凭据之前会检查字段是否为空。这是一种常见的防止浏览器自动填充密码的方法。
不过需要注意的是浏览器的自动填充机制可能会随着时间的推移而改变因此这种解决方案可能不是绝对稳定的。不过暂时我的页面没出现问题。
ant Design下拉框下拉菜单、日历等组件随页面滚动问题
在antd中下拉框组件有很多比如 Select、Dropdown、DatePicker等在点击后会出现下拉选择框但是当滚动页面时会发现下拉框固定不动。 分析 定位问题某些情况下组件的定位可能会受到父元素、祖先元素的定位影响。确保你的组件的定位设置正确可以使用 CSS 的 position、top、left 等属性来控制定位。 层叠上下文在 CSS 中每个元素都位于一个层叠上下文中层叠上下文可以影响元素的渲染和布局。如果组件的父元素或祖先元素具有不同的层叠上下文属性可能会导致组件的位置不正确。了解层叠上下文的工作原理并适当地设置元素的 z-index 属性可以帮助解决这类问题。 Fixed 定位如果你希望组件在页面滚动时保持固定位置可以考虑使用 CSS 中的 position: fixed。这将使组件相对于浏览器窗口固定位置而不受页面滚动的影响。
解决方案 根据官方文档提供的api可以看到有个getPopupContainer参数可以改变下拉弹窗的渲染节点。默认是被渲染到body的所以虽然父容器发生滚动弹窗位置依旧不动。
import React from react;
import { Select } from antd;const Option Select.Option;const Hello () (div style{{ margin: 10, overflow: scroll, height: 200 }}h2Select in a scrollable area/h2div style{{ padding: 100, height: 1000, background: #eee, position: relative }} idareah4可滚动的区域 / scrollable area/h4SelectdefaultValuelucystyle{{ width: 120 }}getPopupContainer{() document.getElementById(area)!}Option valuejackJack/OptionOption valuelucyLucy/OptionOption valueyimingheyiminghe/Option/Select/div/div
);export default Hello;上面面是官网给的使用例子。就是通过id将下拉弹窗绑定到滚动区域。 这样确实能解决滚动问题但是在滚动区域的高度或者宽度不够时下拉弹窗的位置也会发生错位导致样式不好看。 如果在页面高度和宽度允许的情况下可以世道调整滚动容器的大小。由于我的下拉框时放在Modal弹窗里滚动高度是限的所以我使用了动态改变下拉框的渲染容器当页面不需要滚动时就挂载到body。滚动就挂载到滚动容器上。
修改上述代码
import React, { useRef, useState } from react;
import { Select } from antd;const Option Select.Option;const Hello () {const conRef useRefany();const [open, setOpen] useStateboolean(false); // 每次打开下拉框重新渲染挂载节点/** 动态获取挂载节点 */const getContainer () {if (conRef?.current?.scrollHeight 400) {return conRef?.current;}return document.body;};return (div style{{ margin: 10, overflow: scroll, height: 200 }}h2Select in a scrollable area/h2divstyle{{padding: 100,height: 1000,background: #eee,position: relative,}}idarearef{conRef}key{${open}}h4可滚动的区域 / scrollable area/h4SelectdefaultValuelucystyle{{ width: 120 }}getPopupContainer{() getContainer()}onDropdownVisibleChange{(e) setOpen(e)}Option valuejackJack/OptionOption valuelucyLucy/OptionOption valueyimingheyiminghe/Option/Select/div/div);
};export default Hello;
在下拉框打开时根据滚动区域的高度决定下拉框的渲染容器以避免下拉框的内容溢出可视区域。key{${open}} 的作用是为了在每次下拉框打开或关闭时触发一个新的 key从而触发重新渲染。
Table 表格拖拽自适应宽度
当我在实现表格可拖拽列宽度时有时候表格整体宽度不够时其他列也会跟着变化。这是因为ant design 会调整列的宽度为了解决这个问题可以加个空白列去适应多余宽度。 类似以下代码。 ResizableTable.tsx是我根据react-resizable插件封装的Table组件。需要代码可私聊
import React from react;
import ResizableTable from ./ResizableTable.tsx;const columns [{title: Name,dataIndex: name,width: 150,},{title: Age,dataIndex: age,width: 80,},{title: Address,dataIndex: address,width: 200,},{title:, // 用于自适应多余宽度dataIndex:null}
];const dataSource [{key: 1,name: John Brown,age: 32,address: New York No. 1 Lake Park,},// ...more data
];const App () {return ResizableTable columns{columns} dataSource{dataSource} /;
};export default App;
