There is such a component in the antd official example. It can be implemented directly using Form.List. You only need to configure a rule. However, when configuring, the official example has no content by default. You need to manually add another result. , so I want to configure one during initialization, and the first one cannot be deleted:
If you want to have one during initialization, you can configure the configuration item of Form.List: initialValue
For example, if you configure it as: initialValue={[1]}, then it will have a form field when initialized.
If you want to configure that the first form field cannot be deleted, you can make a judgment at the deleted place to see if it is the first one:
When traversing the map, add an index, determine whether the index is the 0th, and then display the close button.
Form field logic code:
<Form.List name="items" key={1} initialValue={[1]}>
{(fields = [], { add, remove }) => (
<div
style={
{
display: 'flex',
rowGap: 16,
flexDirection: 'column',
justifyContent: 'center',
}}
>
{fields.map((field, index) => (
<Card
size="small"
title={`价格规则${field.name + 1}`}
key={field.key}
extra={
index !== 0 ? (
<CloseOutlined
onClick={() => {
remove(field.name)
}}
/>
) : null
}
>
<Form.Item
label="整场价格"
name={[field.name, 'name']}
>
<Input />
</Form.Item>
<Form.Item
label="散客价格"
name={[field.name, 'name']}
>
<Input />
</Form.Item>
<Form.Item
label="价格时间"
name={[field.name, 'name']}
>
<Input />
</Form.Item>
{/* 星期选择 */}
<div className="week">
<Checkbox.Group
options={options}
onChange={onChange}
/>
</div>
</Card>
))}
<Button
type="dashed"
onClick={() => add()}
style={
{ width: '100px', margin: '0 auto' }}
>
添加价格
</Button>
</div>
)}
</Form.List>