如何禁用 Ant Design React Form 中的字段？答案

【问题标题】：How to disable a field in Ant Design React Form?如何禁用 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>

【问题讨论】：

标签： reactjs antd ant-design-pro

【解决方案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。

【讨论】：