javascript - React Native:如何从map()生成的组件中单独控制每个onpress()

我是新来的本地人。
我要连续渲染3个下拉列表，具体取决于数组中元素的数量。
因此，如果数组具有3个元素，那么将有3个3下拉列表的行。
但是，当从单个下拉列表调用onpress时，它将影响所有3行的相应元素。
我如何单独控制每一行？
许多解决方案都说使用绑定，但是我尝试的方法没有影响任何东西。
click to see the rendered layout looks for 3 elements in the arrray

render_center_selection(){

      return(
        this.props.selecteddays_array.map((a, i) => {
          return(
           <View key={i} style={{ height:40, borderBottomWidth:2, borderBottomColor: '#ededed' }}>{
                      <View  style={{flexDirection:'row'}}>
                        <ModalDropdown
                            style={styles.selection}
                            defaultValue='Venue'
                            textStyle={{width:200,fontSize:20,textAlign:'center',color: '#7070D8'}}
                            dropdownStyle={styles.dropdownstyle}
                            dropdownTextStyle={{width:350,fontSize:20,textAlign:'center',backgroundColor: '#FDD60B',}}
                            options={this.state.venue_name_array}
                            onSelect={(index,value)=>{this.onVenueSelect(index,value)}}/>
                        <ModalDropdown
                            ref="modal_dayselect"
                            style={styles.dayselection}
                            defaultValue='Day'
                            textStyle={{width:50,fontSize:15,textAlign:'center',color: '#7070D8'}}
                            dropdownStyle={styles.daydropdownstyle}
                            dropdownTextStyle={{width:50,fontSize:15,textAlign:'center',backgroundColor: '#FDD60B',color: '#7070D8'}}
                            options={this.state.day_array}
                            onSelect={(index,value)=>{this.onDaySelect(index,value)}}/>
                        <ModalDropdown
                            ref="modal_hrsselect"
                            style={styles.dayselection}
                            defaultValue='HRS'
                            textStyle={{width:50,fontSize:15,textAlign:'center',color: '#7070D8'}}
                            dropdownStyle={styles.daydropdownstyle}
                            dropdownTextStyle={{width:50,fontSize:15,textAlign:'center',backgroundColor: '#FDD60B',color: '#7070D8'}}
                            options={this.state.hrs_array}
                            onSelect={(index,value)=>{this.setState({selected_hr:value})}}/>
                        {(this.state.editstatus)
                          ?<Text>Edit</Text>
                          :<Text></Text>
                        }
                      </View>
                  }</View>)
        })
      );
  }

最佳答案

您必须将唯一键传递给onSelect方法，然后才能分别控制每一行。在下面的示例中，您可以看到有两个数组，并且要获取内部数组的数据，我必须传递外部数组的索引以及内部数组的索引。这也将使其独一无二。

var arr1 = [1,2,3]
var arr2 = ['a','b','c']


function looper(data1,data2){
  data1.map((item1,index1) => {
   data2.map((item2,index2) =>console.log("item1: " + item1 + " " + index1 + " item2: " + item2 + " " + index2));
  })
}
looper(arr2,arr1);

关于javascript - React Native:如何从map()生成的组件中单独控制每个onpress()，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/44736634/