日常踩坑记录

本篇文章主要介绍一下最近的开发中用到的些小问题。问题不大，但有些小细节，记录一下，有遇到的朋友可以看一下，有更好的解决方法欢迎分享。

浏览器记住密码自动填充表单

这个问题我在火狐浏览器遇到了。我登录系统时选择了浏览器记住密码；然后在打开新建数据库弹窗，里面的户名和密码竟然自动填充了。设置了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 (<Formname="basic"form={form}labelCol={{ span: 8 }}wrapperCol={{ span: 16 }}initialValues={{ remember: true }}onFinish={onFinish}onFinishFailed={onFinishFailed}autoComplete="off"><Form.Itemlabel="IP"name="ip"rules={[{ required: true, message: "Please input your ip!" }]}><Input /></Form.Item><Form.Itemlabel="Port"name="port"rules={[{ required: true, message: "Please input your port!" }]}><Input /></Form.Item>{/* 用于干扰浏览器记住密码 */}<Form.Item style={{ display: "none" }}><Input onFocus={resetUser}/></Form.Item><Form.Item style={{ display: "none" }}><Input.Password onFocus={resetPass}/></Form.Item><Form.Itemlabel="Username"name="username"rules={[{ required: true, message: "Please input your username!" }]}><Input onFocus={resetUser} /></Form.Item><Form.Itemlabel="Password"name="password"rules={[{ required: true, message: "Please input your password!" }]}><Input.Password onFocus={resetPass} autoComplete="off"/></Form.Item><Form.Item wrapperCol={{ offset: 8, span: 16 }}><Button type="primary" htmlType="submit">Submit</Button></Form.Item></Form>);
};export default MyForm;

具体来说，在代码中添加了两个隐藏的<Form.Item>，一个用于用户名（Input类型），另一个用于密码（Input.Password类型），然后分别在这两个元素的onFocus事件中调用了resetUser和resetPass函数，这两个函数在字段没有被触摸（touched）过的情况下将字段值设置为空字符串。

这样的做法会使浏览器的自动填充机制失效，因为浏览器通常在填充用户凭据之前会检查字段是否为空。这是一种常见的防止浏览器自动填充密码的方法。

不过需要注意的是，浏览器的自动填充机制可能会随着时间的推移而改变，因此这种解决方案可能不是绝对稳定的。不过暂时我的页面没出现问题。

ant Design下拉框，下拉菜单、日历等组件随页面滚动问题

在antd中下拉框组件有很多比如： Select、Dropdown、DatePicker等，在点击后会出现下拉选择框，但是当滚动页面时，会发现下拉框固定不动。
分析：

1. 定位问题：某些情况下，组件的定位可能会受到父元素、祖先元素的定位影响。确保你的组件的定位设置正确，可以使用 CSS 的 position、top、left 等属性来控制定位。

2. 层叠上下文：在 CSS 中，每个元素都位于一个层叠上下文中，层叠上下文可以影响元素的渲染和布局。如果组件的父元素或祖先元素具有不同的层叠上下文属性，可能会导致组件的位置不正确。了解层叠上下文的工作原理，并适当地设置元素的 z-index 属性，可以帮助解决这类问题。

3. 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 }}><h2>Select in a scrollable area</h2><div style={{ padding: 100, height: 1000, background: '#eee', position: 'relative' }} id="area"><h4>可滚动的区域 / scrollable area</h4><SelectdefaultValue="lucy"style={{ width: 120 }}getPopupContainer={() => document.getElementById('area')!}><Option value="jack">Jack</Option><Option value="lucy">Lucy</Option><Option value="yiminghe">yiminghe</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 = useRef<any>();const [open, setOpen] = useState<boolean>(false); // 每次打开下拉框重新渲染挂载节点/** 动态获取挂载节点 */const getContainer = () => {if (conRef?.current?.scrollHeight > 400) {return conRef?.current;}return document.body;};return (<div style={{ margin: 10, overflow: "scroll", height: 200 }}><h2>Select in a scrollable area</h2><divstyle={{padding: 100,height: 1000,background: "#eee",position: "relative",}}id="area"ref={conRef}key={`${open}`}><h4>可滚动的区域 / scrollable area</h4><SelectdefaultValue="lucy"style={{ width: 120 }}getPopupContainer={() => getContainer()}onDropdownVisibleChange={(e) => setOpen(e)}><Option value="jack">Jack</Option><Option value="lucy">Lucy</Option><Option value="yiminghe">yiminghe</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;