zoukankan      html  css  js  c++  java
  • react ant design中下拉表单实现双向联动

    上面是数据结构以及效果图

    下面是实现代码:

    1.react的写法

    <Col span={5} style={{ padding: '0 5px' }}>
                                        <FormItem>
                                            {getFieldDecorator('brandValue')(
                                                <Select
                                                    allowClear
                                                    showSearch
                                                    style={{ '100%' }}
                                                    placeholder="品牌"
                                                    optionFilterProp="children"
                                                    onChange={this.brandChange}
                                                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                                >
                                                    {brandList && brandList.map((item, index) =>
                                                        <Option key={`${index}ss`} value={`${item.brand}`}>{item.brand}</Option>
                                                    )}
                                                </Select>
                                            )}
                                        </FormItem>
     </Col>
    <Col span={6} style={{ padding: '0 5px' }}>
                                        <FormItem>
                                            {getFieldDecorator('car_type', { onChange: this.handleCarTypeChange })(
                                                <Select
                                                    allowClear
                                                    showSearch
                                                    style={{ '100%' }}
                                                    placeholder="车型"
                                                    optionFilterProp="children"
                                                    filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
                                                >
                                                    {car_typeList && _.uniq(car_typeList.map(item => item.car_type)).map((item, index) =>
                                                        <Option key={`${index}s`} value={`${item}`}>{item}</Option>
                                                    )}
                                                </Select>
                                            )}
                                        </FormItem>
     </Col>

      2.js操作

    if (getFieldValue("car_type")) {
                console.log(car_typeList,'car_typeList');
                const names = car_typeList.filter(item => item.car_type == getFieldValue("car_type")).map(item => item.brandname)
                brandList = brandList.filter(item => names.indexOf(item.brand) != -1);
                console.log(brandList,'brandList');
            }
    if (getFieldValue("brandValue")) {
                car_typeList = car_typeList.filter(item => item.brandname == getFieldValue("brandValue"))
            }

      3.接口数据

      const { projectDrop = {} } = this.props;
      let car_typeList = projectDrop.car_typeList || [];//car_type
            let brandList = projectDrop.brandList || [];//brand

      

  • 相关阅读:
    selenium--下拉列表选择
    Java——基本类型包装类,System类,Math类,Arrays类,BigInteger类,BigDecimal类
    Java——Object类,String类,StringBuffer类
    Java——面向对象进阶(final关键字,static关键字,匿名对象,内部类,四种访问修饰符,代码块)
    Java——面向对象进阶(构造方法,this,super)
    Java——面向对象进阶(抽象类,接口)
    Java——面向对象编程
    java——类型转换,冒泡排序,选择排序,二分查找,数组的翻转
    CentOS7下安装MySQL
    Java——定义类,引用类数据类型,集合类型(array list)
  • 原文地址:https://www.cnblogs.com/lppswkf/p/9140234.html
Copyright © 2011-2022 走看看