javascript - react native : How to individually control each onpress() from map() generated components

Question

我是原生 react 新手。 我根据数组中元素的数量连续多次渲染 3 个下拉列表。 因此，如果数组有 3 个元素，则将有 3 行，每行 3 个下拉列表。 但是，当从单个下拉列表中调用 onpress 时，它会影响所有 3 行的相应元素。 我怎样才能单独控制每一行？ 很多解决方案都说使用 bind 但我尝试的方式没有影响任何东西。 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>)                          
        }) 
      );
  }

Answer 1

您必须将唯一的键传递给 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);