当我删除项目时，ArrayInput 不会触发 onChange 函数

Question

我添加了一个

onChange

属性。当我添加一个新元素时它工作得很好，但是如果我删除一个元素，该函数就不会触发。

<ArrayInput
   source="names"
   label={'Names'}
   onChange={updateNames}
   >
   <SimpleFormIterator   
      className={classes.iteratorFormItem}
      >
      <TextInput
         label=""
         source="value"
         validate={maxLength(MAX)}
         />
   </SimpleFormIterator>
</ArrayInput>

我不明白为什么当我删除元素时

onChange

不会触发，因为在这种情况下数组被修改了。

Answer 1

onChange

不是react-admin 的

<ArrayInput>

支持的属性。如果当用户更新子记录时它起作用，那是偶然的。该文档没有提及它（请参阅https://marmelab.com/react-admin/Inputs.html#array-inputs）。

现在，您似乎想在用户更改数据时对其进行处理。为什么不使用

parse

选项呢？ （https://marmelab.com/react-admin/Inputs.html#common-input-props）。

Answer 2

创建自定义删除按钮就像预期的那样工作：

const handleRemove = () => {
    console.log('handleRemove');
}



<SimpleFormIterator
    removeButton={
        <RemoveItemButtonWithListener
            listener={handleRemove}
        />
    }
>



import CloseIcon from '@mui/icons-material/RemoveCircleOutline';

const RemoveItemButtonWithListener = (
    props: {
        listener: () => void
    }
) => {
    const { remove } = useSimpleFormIteratorItem();
    return (
        <IconButtonWithTooltip
            label="ra.action.remove"
            size="small"
            onClick={
                () => {
                    remove();
                    props.listener();
                }
            }
            color="warning"
        >
            <CloseIcon fontSize="small" />
        </IconButtonWithTooltip>
    );
};