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 模版确保背景信息的完善,我们将调查并尽快回复你。