如何禁用 Ant Design React Form 中的字段?
Posted
技术标签:
【中文标题】如何禁用 Ant Design React Form 中的字段?【英文标题】:How to disable a field in Ant Design React Form? 【发布时间】:2020-08-06 12:40:06 【问题描述】:我正在使用带有 Ant Design 的 React,并且我想禁用一个 Form.Item username 字段。请参阅下面的示例代码,
<Form.Item disabled style= padding: '0px 20px' >
getFieldDecorator('username',
initialValue: this.state.userInfo.username,
validate: [
trigger: ['onChange', 'onBlur'],
rules: [
required: true,
message: t('pleaseInput.username'),
],
,
],
)
</Form.Item>
【问题讨论】:
【参考方案1】:您需要在 <Form.Item>
中显示某种 UI 组件。
我想你想显示<Input>
,因为你有一个用户名。以下是您的代码可能实现的功能:
<Form.Item disabled style= padding: '0px 20px' >
getFieldDecorator('username',
initialValue: this.state.userInfo.username,
validate: [
trigger: ['onChange', 'onBlur'],
rules: [
required: true,
message: t('pleaseInput.username'),
],
,
],
)(
<Input
// This is where you want to disable your UI control
disabled=true
placeholder="Username"
/>
)
</Form.Item>
Edit 2021:这个答案的目标是使用 ant design 的 v3 Form 组件。虽然禁用字段的布尔值可能相同,但 v4 中的 Form 组件发生了很多变化。请参阅文档以从 v3 迁移到 v4 here。
【讨论】:
以上是关于如何禁用 Ant Design React Form 中的字段?的主要内容,如果未能解决你的问题,请参考以下文章
React & Ant-Design 应用 —— DatePicker 日期选择框 及 特定日期禁用 Moment.JS
如何使用 Ant Design Vue 禁用 Select 中的特定元素?
如何导入 Ant Design React UI 库和 css?
如何阻止 React Ant Design Upload 组件自动发布文件