ant design form数组修改 关联展示

根据form 数组项修改关联其他选项

如图，在项目开发中，每个form中有多个产品，提货方式不同，有一个需要邮寄展示收货地址，否则不用展示

// An highlighted block
<Card 
                    title="产品信息" 
                    bordered={false}>
                    <Form.List name="productList" >
                            {(fields, {add, remove}) => (
                              <>
                                {fields.map((field) => (
                                    <Row  gutter={16} >
                                                {/* 用得时候只需要修改下面，将需要重复展示的部分替换下面部分即可 注意 -----start*/ }
                                                <Col sm={24} md={12} lg={8} xxl={6}>
                                                        <Form.Item 
                                                            label="产品名称"
                                                            {...field}
                                                            name={[field.name,"wuMiao"]}
                                                            rules={[{
                                                                    required: true,
                                                                    message: '请输入',
                                                                },]}
                                                                >
                                                            <Input placeholder="input placeholder" />
                                                        </Form.Item>
                                                </Col>
                                                <Col sm={24} md={12} lg={8} xxl={6}>
                                                        <Form.Item 
                                                            {...field}
                                                            label="物料编号"
                                                            name={[field.name,"bianHao"]}
                                                            rules={[{
                                                                    required: true,
                                                                    message: '请输入',
                                                                },]}
                                                                >
                                                            <Input placeholder="input placeholder" />
                                                        </Form.Item>
                                                </Col>
                                               
                                                <Col sm={24} md={12} lg={8} xxl={6}>
                                                
                                                        <Form.Item 
                                                            {...field}
                                                            label="借用数量"
                                                            name={[field.name,"jNumber"]}
                                                            rules={[{
                                                                    required: true,
                                                                    message: '请输入',
                                                                },]}
                                                                >
                                                            <InputNumber 
                                                              min={1} placeholder="请输入数量"
                                                              style={{width:'100%'}} />
                                                        </Form.Item>
                                                </Col>
                                                <Col sm={24} md={12} lg={8} xxl={6}>
                                                
                                                        <Form.Item 
                                                            {...field}
                                                            label="提货方式"
                                                            name={[field.name,"tType"]}
                                                            rules={[{
                                                                    required: true,
                                                                    message: '请输入',
                                                                },]}
                                                                >
                                                            <Select>
                                                                <Select.Option value="you">邮寄</Select.Option>
                                                                <Select.Option value="zi">自提</Select.Option>
                                                            </Select>
                                                        </Form.Item>
                                                </Col>
                                                { /* 用得时候只需要修改下面，将需要重复展示的部分替换下面部分即可 -----end*/ }
                                                        
                                                <div styleName="item_btn_wrap">
                                                    <PlusCircleFilled styleName="add_item_btn" onClick={() => add({tType:'zi'})} />
                                                    {fields.length>1&&<CloseCircleFilled  styleName="remove_item_btn" onClick={() => remove(field.name)} />}
                                                </div>
                                    </Row>
                                ))}
                                </>

                            )}

                    </Form.List>
                </Card>
                {showAddress&&
                    <Card title="收货地址">
                        <Row  gutter={16}>
                            <Col sm={24} md={12} lg={8} xxl={6}>
                                <Form.Item 
                                    label="收货人"
                                    name="shouRen"
                                    rules={[{
                                            required: true,
                                            message: '请输入',
                                        },]}
                                        >
                                    <Input placeholder="请输入" />
                                </Form.Item>
                            </Col>
                            <Col sm={24} md={12} lg={8} xxl={6}>
                                <Form.Item 
                                    label="收货人手机"
                                    name="shouRenPhone"
                                    rules={[{
                                            required: true,
                                            message: '请输入',
                                        },]}
                                        >
                                    <Input placeholder="请输入" />
                                </Form.Item>
                            </Col>
                            <Col sm={24} md={12} lg={8} xxl={6}>
                                <Form.Item 
                                    label="收获地址"
                                    name="adress"
                                    rules={[{
                                            required: true,
                                            message: '请输入',
                                        },]}
                                        >
                                    <Input placeholder="请输入" />
                                </Form.Item>
                            </Col>
                            <Col sm={24} md={12} lg={8} xxl={6}>
                                <Form.Item 
                                    label="邮编"
                                    name="youBian"
                                    rules={[{
                                            required: true,
                                            message: '请输入',
                                        },]}
                                        >
                                    <Input placeholder="请输入" />
                                </Form.Item>
                            </Col>
                        </Row>
                    </Card>
                }
                
                <Card>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140

其中的showAddress 变量需要根据上面的修改来进行更新，用到 Form 的onValuesChange方法
具体代码如下

// An highlighted block
 <Form
                form={form}
                name="basic"
               
                initialValues={{
                    remember: true,
                    productList:[{
                        bianHao:'',
                        wuMiao:'',
                        jNumber:'',
                        tType:'you',
                        }]
                }}
               
                onFinish={onFinish}
                onFinishFailed={onFinishFailed}
                onValuesChange={onValuesChange}
                autoComplete="off"
                >
                //其中onValuesChange方法如下
                 /***
				    * @description: 表单数据更新 提货方式中有邮寄，就显示邮寄地址
				    * @param {value,allValues} {Object,Object}  
				    * value:当前修改的值，数组的话会有[undefined,{tType:'1'}]清空，allValues：为全部数据
				    * @Author: fangyuanyuan
				    * @Date: 2023-07-26 16:39:18
				    ***/
    const onValuesChange = (value,allValues) => {
        //判断当前修改的是不是提货方式
        let istType = 
                    value.hasOwnProperty('productList')&&value['productList']
                    .some(item=>item&&item.hasOwnProperty('tType')) 
        if(istType){
           setShowAddress(
                allValues.productList.filter(item=>item&&item.hasOwnProperty('tType'))
                .some(item=>item.tType=='you')
                )
        }
    }
                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

欢迎指正，如有更好的方法，可以留言，共同进步