Question

如何在onPress事件处理程序中获取元素的ID。

我正在动态添加元素，并希望在onPress的事件处理程序中知道这些元素存储在单击哪些元素的状态。

这是我的代码

export default class App extends Component {
    constructor(props){
         super(props);

         this.getElements= this.getElements.bind(this);
         this.selectElement = this.selectElement.bind(this);
       }

       componentWillMount(){
         this.state = {
           noOfElements :10
         }
       }

       selectElement(e,key){
          console.log('selectElement() : key=',key);
       }

       getElements(){
          let elements =[];
          for(let index=0;index<this.state.noOfElements;index++){
             elements.push(
                    <View key={'View_'+index} style={{flex:1}}>
                           <Button 
                              key={'View_'+index}
                              id={index}
                              onPress={(e,index) => {this.selectElement(e,index)}}    
                              title={'Button-'+index}
                           />
                    </View>
             );
          }
          return elements;
       }
       render(){
           let elements = this.getElements();
           return(
              <View style={styles.container}>
                 <Text>Test</Text>
                 {elements}
              </View>
           );
       }
    }

我试过像

那样传递密钥

onPress={(index) => {this.selectElement(index)}}

没有成功..

不确定我做错了什么。

Answer 1

你拥有它的方式，我认为索引会出现未定义，只需在你的onPress中删除索引作为参数，这样就可以从for循环中获取索引。你也可以使用map来重构它。

{{1}}

Answer 2

如下所示更改了事件处理程序，现在工作正常。

onPress={this.selectElement.bind(this,index)}

并且该函数现在只接受索引

selectElement(key){
      console.log('selectElement() : Index=',key);
   }

在事件处理程序中获取react-native元素的Id

2 个答案: