实习了几个月,要开始有点输出和思考了,这个系列包含我遇到的问题和一些想法,可能解决,可能未解决,希望和大家一起讨论出答案!
此处包含一些个人理解,如有问题,请狠狠批评!!
在antd里面如果一个下拉框想要实现一个既可以选择又可以输入的话,就可以
Select换成这个AutoComplete
今天看别人写的代码一个父组件可以拿到两个子组件绑定的表单,使用ref转发实现的,虽然感觉这样做挺好的,感觉有点麻烦,想知道现在还有没有更好的办法实现这个?
点开forwardRef的react官方文档api,发现这个方法已经被废弃了,
现在ref已经作为props可以直接被传递了!!!这样不就少了很多步骤?
destroyOnClose,我写了一个列表选择的组件,大概是想要实现每一次关闭弹窗的时候,列表选择都会被重置,我之前使用表单明明是可以做到的,但是这一次我加了这属性失效了,看网上的说法:这个属性只用于,状态管理在弹窗之内被控制的,如果在弹窗之外还能被控制,就是不行的,其次是因为这个是清空表单状态的,其实我根本没看懂,所以打算看看Modal里面是怎么实现的,点开它的源码!
Modal源码 能力有限,不能全部看懂,在豆包的帮助下,大概明白了几点
- Modal 组件接收 `destroyOnClose` 属性其实就是已废弃的 `destroyOnHidden`
- Modal 组件本质上是对 `rc-dialog` 库的 `Dialog` 组件的封装
- `destroyOnClose` 属性最终会传递给 `Dialog` 组件的同名属性:
- 当 `destroyOnClose` 为 `true` 时:模态框关闭后,会彻底销毁其对应的 DOM 元素
- 当 `destroyOnClose` 为 `false` 时(默认):模态框关闭后,DOM 元素会被保留在页面中(通常是设置 `display: none`),只是不可见
- 设为 `true`:适合一次性使用的模态框,或需要每次打开都重新初始化状态的场景
- 设为 `false`:适合频繁切换显示 / 隐藏的模态框,可以避免重复创建 DOM 的性能开销
所以结合这些知识点再去看上面的这个属性,就有点明白了,因为我的选中状态是通过useState的数组控制的,销毁dom之后再重新渲染选中状态还会被渲染上去,所以相当于没有达到我的目的,但是如果是form表单,这个问题就涉及两方面:
在 Ant Design 中,Form 组件的状态(如输入值、校验信息等)通常存储在两个地方:
-
form实例:通过Form.useForm()创建的实例,存储了表单的核心状态(如values、errors等)。 -
DOM 元素:输入框(如
Input)本身会保留用户输入的临时值(直到被form实例同步)。 -
如果
form实例是在 Modal 内部创建的(如const [form] = Form.useForm()写在 Modal 组件内部),那么 Modal 销毁时,form实例也会被销毁,重新创建时状态自然为空。 -
如果
form实例是在 Modal 外部创建的(如父组件传递form实例),理论上form实例的values会被保留,但新创建的输入框默认不会自动同步form实例的历史值,需要显式通过form.setFieldsValue()恢复