0

我正在使用这个库来实现下拉选项。我在屏幕上有多个下拉视图。一切都很好，但问题是当打开一个框视图时，我将打开另一个下拉列表。那时两个盒子都处于打开状态。

我想达到什么目的？- 当一个盒子被打开并且我点击另一个下拉菜单来打开之前的 dropdox 盒子时，它会自动关闭。我怎么能做到这一点？

显示下拉菜单

两个盒子都打开了

下面是我的两个下拉代码-

<View style={{ marginRight: 8, marginLeft: 8, marginBottom: 3 }}>

                               <View style={{ width: '100%', justifyContent: 'center', marginTop: 12 }}>
                                    <View style={{ width: '100%', height: CONSTANTS.windowHeight * 0.0755, }}>

                                    </View>

                                    <DropDownPicker
                                         zIndex={3000}
                                         zIndexInverse={1000}
                                         searchable={true}
                                         onOpen={() => { this.setState({ dropdown_visible: false }), console.log("opened"), this.stateOpen()  }}
                                         // onClose={() => this.setState({ dropdown_visible: false })}
                                         // style = {{marginTop: 50}}
                                         open={this.state.state_open}

                                         containerStyle={{ position: 'absolute', height: CONSTANTS.windowHeight * 0.07, alignSelf: 'center', left: 1, right: 1 }}
                                         itemStyle={{ justifyContent: 'flex-start' }}
                                         dropDownStyle={{ borderColor: CONSTANTS.COLOR.BASE_COLOR, backgroundColor: CONSTANTS.COLOR.DROPDOWN_BACKGROUND, textAlign: 'flext-start' }}
                                         items={states}
                                         placeholder="Select State"
                                         placeholderStyle={{
                                              color: 'gray',
                                              textAlign: 'left'
                                         }}
                                         controller={instance => this.controller = instance}
                                         onChangeList={(states, callback) => {
                                              this.setState({
                                                   states // items: items
                                              }, callback);
                                         }}

                                         defaultValue={this.state.value}
                                         onChangeItem={(item, index) => (this.setState({
                                              state_name: item.value, state_id: states_with_id[index].id
                                         }), this.getCity(states_with_id[index].id))}
                                    />
                               </View>

                          </View>


                          <View style={{ marginRight: 8, marginLeft: 8, marginBottom: 3 }}>

                               <View style={{ width: '100%', justifyContent: 'center', marginTop: 12 }}>
                                    <View style={{ width: '100%', height: CONSTANTS.windowHeight * 0.0755 }}>

                                    </View>

                                    <DropDownPicker
                                         zIndex={2000}
                                         zIndexInverse={2000}
                                         controller={instance => controller = instance}
                                         searchable={true}
                                         onOpen={() => { this.setState({ dropdown_visible: false }), this.cityOpen() }}
                                         // onClose={() => this.setState({ dropdown_visible: false })}
                                         // style = {{marginTop: 50}}
                                         open={this.state.city_open}
                                         containerStyle={{ position: 'absolute', height: CONSTANTS.windowHeight * 0.0755, alignSelf: 'center', left: 1, right: 1 }}
                                         itemStyle={{ justifyContent: 'flex-start' }}
                                         dropDownStyle={{ borderColor: CONSTANTS.COLOR.BASE_COLOR, backgroundColor: CONSTANTS.COLOR.DROPDOWN_BACKGROUND, textAlign: 'flext-start' }}
                                         items={cities}
                                         placeholder="Select City"
                                         placeholderStyle={{
                                              color: 'gray',
                                              textAlign: 'left'
                                         }}
                                         controller={instance => this.controller = instance}
                                         onChangeList={(cities, callback) => {
                                              this.setState({
                                                   cities // items: items
                                              }, callback);
                                         }}

                                         defaultValue={this.state.value}
                                         onChangeItem={(item, index) => this.setState({
                                              city_name: item.value, city_id: cities_with_id[index].id
                                         })}
                                    />
                               </View>

                          </View>
4

1 回答 1

0

您可以在您的状态中使用与打开下拉菜单直接相关的变量。

例如：下拉1、下拉2。在您的第一次渲染中，它们应该设置为false。

现在，每当使用函数onOpen()打开下拉菜单时，您应该将要打开的下拉菜单的状态设置为 true，其余设置为 false：

下拉 1 个示例

onOpen={() => { this.setState({ dropdown1: true, dropdown2: false }), this.cityOpen() }}

然后仅使用条件显示您需要的下拉列表。

于 2021-05-08T17:53:28.280 回答