🐛[BUG] ProFormFields的readonly属性优先级没有ProForm的优先级高
提问前先看看:
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]
🚑 其他信息
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