如何在编辑表单选项时禁用下拉菜单？答案

【问题标题】：How to disable the dropdown while editing form option?如何在编辑表单选项时禁用下拉菜单？
【发布时间】：2021-08-18 09:57:55
【问题描述】：

<FormField
  form={props.form}
  name={'DataLocationId'}
  label={t('projectForm.field.dataCenter.label')}
  fieldType={'select'}
  message={`${t('common.required')}`}
  required
  options={dataLocations}
  isDisabled={true}
  selected={dataLocations.find(d => d.value === initialProperties?.DataLocationId)}
/>

        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 ={true}，但它不起作用。

【问题讨论】：

FormField 来自哪里？顺便说一下，道具名称可能是disabled
case 'select': return ( );

标签： reactjs react-native react-redux react-hooks react-hook-form

【解决方案1】：

将 isDisabled 传递给 Field 可能会解决您的问题；

  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}
                    disabled={this.props.isDisabled} // <-- this is the line you need to add
                />
            );

假设Field 组件禁用了prop

【讨论】：