如何在Next.js的@formio/react组件中隐藏表单字段的删除编辑按钮

下面提供几种实用的实现方式，根据你的需求场景选择：

1. 直接修改表单配置（formJson） #

这是最直接的方式，在表单的JSON配置中，给需要限制的字段添加editable和removable属性：

// 假设你的formJson中有目标字段，修改它的配置
const modifiedFormJson = {
  ...formJson,
  components: formJson.components.map(component => {
    // 比如针对fieldKey为"username"的字段禁用编辑和删除
    if (component.key === "username") {
      return {
        ...component,
        editable: false, // 禁用编辑按钮
        removable: false // 禁用删除按钮
      };
    }
    return component;
  })
};

// 在Formio组件中使用修改后的配置
<Formio src={modifiedFormJson} onSubmit={submitHandler} onChange={handleFormChange}/>

2. 通过自定义组件渲染控制 #

如果需要更灵活的条件判断（比如根据用户权限动态控制），可以通过components属性自定义字段的渲染逻辑：

import { Components } from '@formio/react';

// 继承默认的字段组件，重写渲染方法
const CustomTextField = Components.components.textfield.extend({
  render() {
    const originalElement = super.render();
    // 根据条件判断是否移除编辑/删除按钮
    if (this.component.key === "sensitiveField") {
      const editBtn = originalElement.querySelector('.btn-edit');
      const deleteBtn = originalElement.querySelector('.btn-delete');
      if (editBtn) editBtn.remove();
      if (deleteBtn) deleteBtn.remove();
    }
    return originalElement;
  }
});

// 在Formio组件中注册自定义组件
<Formio 
  src={formJson} 
  onSubmit={submitHandler} 
  onChange={handleFormChange}
  components={{ textfield: CustomTextField }}
/>

3. 利用表单加载回调动态修改属性 #

如果表单配置是从远程加载的，可以在onFormReady回调中修改字段属性：

const handleFormReady = (form) => {
  // 找到目标字段
  const targetComponent = form.getComponent('email');
  if (targetComponent) {
    targetComponent.editable = false;
    targetComponent.removable = false;
    // 重新渲染表单
    form.refresh();
  }
};

<Formio 
  src={formJson} 
  onSubmit={submitHandler} 
  onChange={handleFormChange}
  onFormReady={handleFormReady}
/>

4. CSS样式层面控制（快速简单场景） #

如果只是简单隐藏按钮，不需要逻辑判断，可以给目标字段添加自定义类，然后用CSS隐藏按钮：

// 在formJson的目标字段中添加自定义类
const modifiedFormJson = {
  ...formJson,
  components: formJson.components.map(component => {
    if (component.key === "phone") {
      return {
        ...component,
        customClass: "no-edit-delete"
      };
    }
    return component;
  })
};

然后在全局CSS中添加：

.no-edit-delete .btn-edit,
.no-edit-delete .btn-delete {
  display: none !important;
}

内容的提问来源于stack exchange，提问作者Nikhil Jikar