ArrayInput删除元素时未触发onChange函数问题咨询

你使用的是react-admin提供的ArrayInput组件，该组件低版本的onChange回调设计仅响应内部子输入控件的值变更事件：新增元素时会触发新插入TextInput的初始化赋值事件，链路会向上传递触发ArrayInput的onChange；但删除元素是SimpleFormIterator组件直接操作表单底层数据源，不会触发子输入控件的变更事件，因此ArrayInput的onChange不会被触发。这是react-admin低版本的已知问题。

• 方案1：监听表单全局对应字段变化
  如果你用的是react-hook-form作为表单底层库，可以直接用watch监听names字段的全量变更，新增、删除、修改都会触发回调：

  import { useWatch } from 'react-hook-form';
  
  // 组件内逻辑
  const names = useWatch({ name: 'names' });
  useEffect(() => {
    updateNames(names);
  }, [names, updateNames]);
  

  该方案不需要修改原有组件属性，适配性最高。
• 方案2：为SimpleFormIterator新增删除监听回调
  给SimpleFormIterator添加onRemove属性，删除元素时手动计算最新数组并触发你的更新逻辑：

  <ArrayInput
     source="names"
     label={'Names'}
     onChange={updateNames}
     >
     <SimpleFormIterator   
        className={classes.iteratorFormItem}
        onRemove={(removeIndex) => {
          const currentNames = getValues('names');
          const newNames = currentNames.filter((_, idx) => idx !== removeIndex);
          updateNames(newNames);
        }}
        >
        <TextInput
           label=""
           source="value"
           validate={maxLength(MAX)}
           />
     </SimpleFormIterator>
  </ArrayInput>
  

• 方案3：升级react-admin到4.10及以上版本
  该版本官方已经修复了ArrayInput删除元素不触发onChange的bug，升级后原有代码无需修改即可同时响应新增、删除场景的数组变更。

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