ant-design-mobile icon indicating copy to clipboard operation
ant-design-mobile copied to clipboard

Form.List 中的某一项删除后,其他字段也被意外影响了

Open awmleer opened this issue 1 year ago • 4 comments

Version of antd-mobile

5.22.0

Operating system and its version

Others

Browser and its version

Chrome

Sandbox to reproduce

https://stackblitz.com/edit/react-ts-ufnhw9?file=App.tsx

What happened?

复现方法是:

  1. 打开上面的 demo
  2. 点添加按钮,添加三项内容,并分别输入一些值
  3. 删除第二项
  4. 发现此时第三项的值也异常了

预期行为:

点击删除之后,第三项的值保持不变,仅第二项被删除掉

额外一点补充:

把 Form 上的 preserve={false} 去掉就行为正常了 疑似 rc-field-form 的问题

Relevant log output

No response

awmleer avatar Aug 22 '22 08:08 awmleer

<Form.Item 
+ isListField
  name={[index, 'checkConfig']}
  label={`"bug"-${index}`}

加上这个属性后就正常了。需要组件内部处理下

IronKinoko avatar Aug 24 '22 05:08 IronKinoko

噢原来是这样~还有个内部 API

@IronKinoko 你有兴趣来提个 PR 嘛

awmleer avatar Aug 27 '22 01:08 awmleer

我看了 antdprocomponent 也没处理这个,只有 preserve={false} 受影响

IronKinoko avatar Aug 27 '22 03:08 IronKinoko

这个感觉不好改😳

要么就在 readme 里头加个提醒?

要么就基于From.Item 再封一层 Form.ArrayItem,默认加上 isListField。然后还得在 readme 里提醒用户在使用 Form.Array 的时候得使用这个 Form.ArrayItem

再要么就得大改 Form.Array 了?目前这个是直接调用 props.children() 的,而它的类型是 (fields: FormArrayField[], operation: FormArrayOperation) => ReactElement[],这个组件层面没法控制。

wine-fall avatar Sep 21 '22 07:09 wine-fall