Tencent/tdesign-react

formList 组件内新增一项,会有问题

Closed this issue · 1 comments

tdesign-react 版本

1.10.0

重现链接

No response

重现步骤

https://stackblitz.com/edit/react-kw3fgf?file=src%2Fdemo.tsx
打开上方链接,然后把下面这个代码复制进去就能复现

mport React from 'react';
import { Form, Input, Button, Select } from 'tdesign-react';
import { MinusCircleIcon } from 'tdesign-icons-react';

const { FormItem, FormList } = Form;

const provinceOptions = [
{ label: '北京', value: 'bj', a: 1 },
{ label: '上海', value: 'sh', a: 2 },
{ label: '广州', value: 'gz', a: 3 },
{ label: '深圳', value: 'sz', a: 4 },
];

export default function BaseForm() {
const [form] = Form.useForm();

function onSubmit() {
const allFields = form.getFieldsValue(true);
console.log('allFields', allFields);
}

return (



{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }, index) => (

<FormItem
{...restField}
name={[name, 'province']}
label="省份"
rules={[{ required: true, type: 'error' }]}
>


<FormItem
{...restField}
name={[name, 'a']}
label="省份"
rules={[{ required: true, type: 'error' }]}
>



<MinusCircleIcon
size="20px"
style={{ cursor: 'pointer' }}
onClick={() => remove(name)}
/>
<Button
theme="default"
variant="dashed"
onClick={() =>
add({ province: 'bj', area: 'tzmax' }, index + 1)
}
>
Add field


<FormItem style={{ marginLeft: 100 }}>
<Button
theme="default"
variant="dashed"
onClick={() =>
add({ province: 'sh', area: 'tzmax', a: '11' })
}
>
Add field



))}
<FormItem style={{ marginLeft: 100 }}>
<Button
theme="default"
variant="dashed"
onClick={() => add({ province: 'sh', area: 'tzmax', a: '11' })}
>
Add field


</>
)}

<FormItem style={{ marginLeft: 100 }}>

提交

<Button type="reset" style={{ marginLeft: 12 }}>
重置



);
}

期望结果

内部新增按钮,可以新增省份为上海

实际结果

No response

框架版本

No response

浏览器版本

No response

系统版本

No response

Node版本

No response

补充说明

import React from 'react';
import { Form, Input, Button, Select } from 'tdesign-react';
import { MinusCircleIcon } from 'tdesign-icons-react';

const { FormItem, FormList } = Form;

const provinceOptions = [
{ label: '北京', value: 'bj', a: 1 },
{ label: '上海', value: 'sh', a: 2 },
{ label: '广州', value: 'gz', a: 3 },
{ label: '深圳', value: 'sz', a: 4 },
];

export default function BaseForm() {
const [form] = Form.useForm();

function onSubmit() {
const allFields = form.getFieldsValue(true);
console.log('allFields', allFields);
}

return (



{(fields, { add, remove }) => (
<>
{fields.map(({ key, name, ...restField }, index) => (

<FormItem
{...restField}
name={[name, 'province']}
label="省份"
rules={[{ required: true, type: 'error' }]}
>


<FormItem
{...restField}
name={[name, 'a']}
label="省份"
rules={[{ required: true, type: 'error' }]}
>



<MinusCircleIcon
size="20px"
style={{ cursor: 'pointer' }}
onClick={() => remove(name)}
/>
<Button
theme="default"
variant="dashed"
onClick={() =>
add({ province: 'bj', area: 'tzmax' }, index + 1)
}
>
Add field


<FormItem style={{ marginLeft: 100 }}>
<Button
theme="default"
variant="dashed"
onClick={() =>
add({ province: 'sh', area: 'tzmax', a: '11' })
}
>
Add field



))}
<FormItem style={{ marginLeft: 100 }}>
<Button
theme="default"
variant="dashed"
onClick={() => add({ province: 'sh', area: 'tzmax', a: '11' })}
>
Add field


</>
)}

<FormItem style={{ marginLeft: 100 }}>

提交

<Button type="reset" style={{ marginLeft: 12 }}>
重置



);
}

👋 @Lyrics1,感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善,我们将调查并尽快回复你。