pro-components icon indicating copy to clipboard operation
pro-components copied to clipboard

🐛[BUG] ProFormFields的readonly属性优先级没有ProForm的优先级高

Open neohan666 opened this issue 4 months ago • 1 comments

提问前先看看:

https://github.com/ryanhanwu/How-To-Ask-Questions-The-Smart-Way/blob/main/README-zh_CN.md

🐛 bug 描述

ProFormFields的readonly属性优先级没有ProForm的优先级高,按理说应该子组件的优先级更高才是,有些场景需要个别子表单组件不使用readonly,需要能覆盖ProForm的readonly配置。

📷 复现步骤

🏞 期望结果

💻 复现代码

© 版本信息

  • ProComponents 版本: [e.g. 4.0.0]
  • umi 版本
  • 浏览器环境
  • 开发环境 [e.g. mac OS]

🚑 其他信息

neohan666 avatar Aug 18 '25 03:08 neohan666

Hi @neohan666! I'm Dosu and I’m helping the pro-components team.

你反馈的 readonly 优先级问题确实存在:虽然 ProComponents 的设计是让子组件(如 ProFormFields)的 readonly 属性优先于父级 ProForm 的 readonly,但实际代码合并顺序导致有时无法覆盖父级,只读状态会被父级 readonly“盖住” 相关源码分析

官方注释也说明了“表单项的 readonly 优先级高于表单整体”,但实际表现不一致,目前没有文档或 PR 修复这个问题 源码注释

临时解决方案:对于自定义表单项,可以手动传递 readonly 属性,或者在组件内部通过 EditOrReadOnlyContext 判断当前模式 社区讨论与示例。但对于内置组件,暂时没有通用办法,只能等待后续版本修复。

建议关注相关 issue 和更新,或者在自定义组件中用类似如下方式处理:

import { EditOrReadOnlyContext } from '@ant-design/pro-form/es/BaseForm/EditOrReadOnlyContext';
const MyField = (props) => {
  const mode = React.useContext(EditOrReadOnlyContext);
  // props.readonly 优先于 mode
  const isReadOnly = props.readonly ?? mode === 'read';
  return <Input readOnly={isReadOnly} />;
};

如需更细粒度控制,只能在每个字段单独处理 readonly。

To reply, just mention @dosu.


How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other  Chat with Dosu Join Discord Share on X

dosubot[bot] avatar Aug 18 '25 03:08 dosubot[bot]