react ant design中下拉表單實現雙向聯動

 

上面是數據結構以及效果圖

 

下面是實現代碼：

1.react的寫法

<Col span={5} style={{ padding: '0 5px' }}>

                                    <FormItem>

                                        {getFieldDecorator('brandValue')(

                                            <Select

                                                allowClear

                                                showSearch

                                                style={{ width: '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={{ width: '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