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

Question

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

标签： reactjsreact-nativereact-reduxreact-hooksreact-hook-form

Answer 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组件已禁用道具