编辑表单时如何禁用已选中值的下拉框？设置isDisabled不生效如何解决

问题根因 #

你在FormField的select类型渲染逻辑中，没有将上层传入的isDisabled属性透传给最终渲染的Field/SelectField组件，配置的禁用状态没有传递到实际控制交互的底层组件，因此不生效。

修复步骤 #

1. 首先修改select分支的渲染逻辑，透传isDisabled属性：

case 'select':
    return (
        <Field
            name={this.props.name}
            label={this.props.label}
            conf={this.props}
            component={SelectField}
            className="bnt-hc-inputs-input"
            type="select"
            options={this.props.options}
            form={this.props.form}
            selected={this.props.selected}
            // 新增透传禁用属性
            isDisabled={this.props.isDisabled}
        />
    );

注意：如果你的底层SelectField组件接收的禁用属性是disabled而非isDisabled，请将上面的属性名改为disabled={this.props.isDisabled}，和底层组件的属性要求保持一致。

2. 如果你的需求是「只有当下拉框已有选中值时才禁用」，可以将isDisabled的赋值从写死的true改为动态判断逻辑：

<FormField
  form={props.form}
  name={'DataLocationId'}
  label={t('projectForm.field.dataCenter.label')}
  fieldType={'select'}
  message={`${t('common.required')}`}
  required
  options={dataLocations}
  // 存在选中值时自动禁用，无值时可正常选择
  isDisabled={!!initialProperties?.DataLocationId}
  selected={dataLocations.find(d => d.value === initialProperties?.DataLocationId)}
/>

内容的提问来源于stack exchange，提问作者monali patil