如何禁用 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】:

您需要在 &lt;Form.Item&gt; 中显示某种 UI 组件。

我想你想显示&lt;Input&gt;,因为你有一个用户名。以下是您的代码可能实现的功能:

<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 组件自动发布文件

如何使用 CodeSandbox 在 LESS 中为 Ant Design (React) 创建自定义主题?

如何自定义 Ant.design 样式