本机基本列表项单击事件不起作用

Question

我已经开始学习仅在2天之前就对本机做出的反应。 我正在使用Native Base UI框架中的列表项组件。

根据他们的文档和示例，要在ListItem上捕获单击事件，您需要在ListItem上添加onPress和button选项。 但就我而言，它不起作用。

我还有一个元素也跟踪click事件，它工作正常，但是list元素没有捕获click事件。

奇怪的是，如果我触发警报，它会起作用

<List button onPress={() => { Alert.alert('Item got clicked!') } }>

在id下面我完整的代码

  import React from 'react';
  import { 
    Content, 
    List, 
    ListItem, 
    Body, 
    Thumbnail, 
    Text, 
    Badge, 
    View 
  } from 'native-base';
  import { ActivityIndicator, TouchableHighlight, TouchableOpacity, Alert } from 'react-native';

  export default class Questions extends React.Component{

    constructor(props){
      super(props);
      this.handleClick = this.handleClick.bind(this);
    }

    handleClick(){
      Alert.alert("I am clicked");
      // Call method from parent
      this.props.onPress();
    }

    render() {
        var items = this.props.items;

        return (
          <Content>
            <List button onPress={() => { this.handleClick } }>
                {Object.keys(items).map(function(eachQuestion) {
                  return (
                    <ListItem avatar key={items[eachQuestion].id} button onPress={() => { this.handleClick } } >
                      <Body>
                        <Text>{items[eachQuestion].question}</Text>
                      </Body>
                    </ListItem>
                  )
                })}  
            </List>

            <TouchableOpacity onPress={this.handleClick}> 
                <View><Text>Click me</Text></View> 
            </TouchableOpacity>          
          </Content>  
        ); 

   }
  }

编辑1

    render() {
        var questions = {
          "1" : "James", 
          "2" : "Smith", 
          "3" : "Doe", 
          "4" : "Smith"
        };

        return (
          <Container>
            <Content>
              <List>
                {Object.keys(questions).map(function(key) {
                  return (<ListItem button={true} onPress={this.handleClick}>
                            <Text>{questions[key]}</Text>
                          </ListItem>
                  )        
                })}
              </List>
            </Content>
          </Container>        
        ); 
    }

**最终解决方案**

handleClick(){
  Alert.alert("I got clicked");
}

render() {
  var questions = this.props.questions;

  return (
    <Content>
      <List>
          {Object.keys(questions).map((eachQuestion) => { 
            return (
                <ListItem key={questions[eachQuestion].id} button={true} onPress={this.handleClick} >
                  <Body>
                    <Text>{questions[eachQuestion].question}</Text>
                  </Body>
                </ListItem>
            )
          })}  
      </List>
    </Content>  
  );

}

Answer 1

两个错误：

您应该仔细阅读ES6 箭头函数表达式。 您没有调用handleClick函数，这就是为什么什么都没有发生的原因，而您的Alert示例却在其中起作用（因为您实际上在做某事）。
您没有定义button prop的值。 文档说没有默认值，因此最好将其定义为true或false 。

因此，要修复您的代码，您应该像这样为ListItem定义道具：

button={true}
onPress={() => { this.handleClick() }}

或使其更短：

button={true}
onPress={this.handleClick}

我也不确定为什么要在List组件上定义button和onPress道具，因为您要单击的是ListItem ，而不是整个List本身。 但是，由于这不是问题的一部分，因此我不会解决。

工作代码的完整示例：

import React, { Component } from 'react';
import { Container, Content, List, ListItem, Text } from 'native-base';
import { Alert } from 'react-native';

export default class App extends Component {
  constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(){
    Alert.alert("I am clicked");
    // Call method from parent
    //this.props.onPress();
  }

  render() {
    return (
      <Container>
        <Content>
          <List>
            <ListItem button={true} onPress={this.handleClick}>
              <Text>Simon Mignolet</Text>
            </ListItem>
            <ListItem button={true} onPress={() => { this.handleClick() }}>
              <Text>Nathaniel Clyne</Text>
            </ListItem>
            <ListItem button={true} onPress={this.handleClick}>
              <Text>Dejan Lovren</Text>
            </ListItem>
          </List>
        </Content>
      </Container>
    );
  }
}

本机基本列表项单击事件不起作用

问题描述

1 个解决方案

解决方案1
3 已采纳 2017-07-10 15:44:30

本机基本列表项单击事件不起作用

问题描述

1 个解决方案

解决方案1 3 已采纳 2017-07-10 15:44:30

解决方案1
3 已采纳 2017-07-10 15:44:30