ant design form数组修改关联展示

最新推荐文章于 2024-03-04 13:09:05 发布

想做大牛的蜗牛

最新推荐文章于 2024-03-04 13:09:05 发布

阅读量212

点赞数

文章标签： antd Form react.js

本文链接：https://blog.csdn.net/xiaowoniuqiren/article/details/133751142

版权

根据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>

其中的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')
                )
        }
    }