如何自定义React Admin中ArrayInput的移除图标点击逻辑？

要给React Admin中ArrayInput里的移除图标添加自定义点击逻辑，你可以通过SimpleFormIterator的两个属性来实现，以下是两种实用方案：

方案一：扩展默认移除按钮的点击事件 #

通过removeButtonProps给默认的移除按钮追加自定义操作，默认的移除逻辑会保留并执行：

<ArrayInput source="items">
  <SimpleFormIterator 
    removeButtonProps={{
      onClick: () => {
        // 在这里编写你的额外操作，比如日志上报、接口请求等
        console.log("执行移除前的自定义操作");
        // 无需阻止默认行为，默认的移除逻辑会自动执行
      }
    }}
  >
    <FormDataConsumer>
      {({ scopedFormData = {}, getSource, ...rest }) => (
        <TextInput source="name" />
      )}
    </FormDataConsumer>
  </SimpleFormIterator>
</ArrayInput>

方案二：完全自定义移除按钮 #

如果需要更灵活的控制（比如修改图标、按钮样式），可以通过removeButton属性自定义移除按钮，手动调用默认的移除方法：

import { IconButton } from '@mui/material';
import DeleteIcon from '@mui/icons-material/Delete';
import { useFormikContext } from 'formik';

// 在你的表单组件内
const { values } = useFormikContext();

<ArrayInput source="items">
  <SimpleFormIterator 
    removeButton={({ onRemove, index }) => (
      <IconButton
        onClick={() => {
          // 获取当前要移除的项数据（可选）
          const targetItem = values.items[index];
          console.log("即将移除的项：", targetItem);
          
          // 执行你的额外操作
          // 例如：await api.deleteItem(targetItem.id);
          
          // 调用默认移除方法，触发React Admin的数组项删除逻辑
          onRemove();
        }}
        aria-label="移除该项"
      >
        <DeleteIcon />
      </IconButton>
    )}
  >
    <FormDataConsumer>
      {({ scopedFormData = {}, getSource, ...rest }) => (
        <TextInput source="name" />
      )}
    </FormDataConsumer>
  </SimpleFormIterator>
</ArrayInput>

注意事项 #

• 使用方案一的removeButtonProps时，自定义的onClick会和默认点击逻辑共存，默认操作会在你的自定义代码之后执行
• 使用方案二时，必须手动调用onRemove方法，否则React Admin的默认移除逻辑不会触发
• 如果需要操作当前项的数据，可以借助useFormikContext获取表单的完整数据，通过index定位到对应项

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