-
Modal.Form 经常使用在模态框中收集用户的表单信息,可以在这个组件中传入自己想要的表单元素,示例 我们经常需要在打开 Modal 的时候通过 visible 来判断是否去请求接口 useEeffect(() => {
visible && fecthxxx
}, [visible]) 但是如果我们使用 Modal.Form 来做,无法实现上述功能,代码如下 const ModalForm = Modal.Form<CustomModalFormProps, FormValues>((props) => {
console.log('ModalForm---', props.visible);
useEffect(() => {
console.log('uesEffect---', props.visible);
}, [props.visible]);
return (
<>
<Form.Item label="我是自定义参数" name={'name'} initialValue={props.customAttr}>
<Input disabled />
</Form.Item>
<Form.Item label="username" name={'username'} rules={[{ max: 10 }]}>
<Input />
</Form.Item>
</>
);
});
export default () => {
const [visible, setVisible] = useState(false);
return (
<>
<Button onClick={() => setVisible(true)}>click</Button>
<ModalForm
title="BasicModalForm"
visible={visible}
onCancel={() => setVisible((v) => !v)}
onSubmit={(value) => {
console.log(value);
}}
customAttr={'customAttr'}
/>
</>
);
}; 能够发现传给 Modal.Form 的组件中,拿到的 visible 一直为 true 导致原因为 Modal 底层的 memo 操作,代码 当然可以通过 forceRender = true,来解决这个问题(不优雅) 目前在这个组件在资产中大量使用,目前很多新的代码已经不在使用这个组件了;业务中心一个。 |
Beta Was this translation helpful? Give feedback.
Answered by
mumiao
Feb 5, 2024
Replies: 2 comments
-
可以废弃,比较鸡肋的组件 |
Beta Was this translation helpful? Give feedback.
0 replies
Answer selected by
mumiao
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
可以废弃,比较鸡肋的组件