onclick 功能在反应本机应用程序中不起作用答案

【问题标题】：onclick function is not working in react native applicationonclick 功能在反应本机应用程序中不起作用
【发布时间】：2016-04-05 05:37:57
【问题描述】：

我是原生反应的新手。如果用户单击文本，我编写了以下代码来调用函数。

var login = React.createClass({
     openPopup: function(){
        console.log("function called");
     },
     render: function(){
        return (
           <View onClick={this.openPopup}>
              <Text>
                 Login
              </Text>
           </View>
        );
     }
});

上面的代码有什么问题吗？如果我单击登录文本，我不会在控制台中收到任何反馈。

编辑这个问题是反应原生的。不与 Stack Overflow 中的任何其他问题重复。

【问题讨论】：

React onClick event on component的可能重复
这个问题只针对 react.js。我不能在本机反应中使用 div 元素。而不是它，我使用的是视图和文本标签。这个问题在反应原生特定。该问题的答案对我没有帮助。
问题不是 React native 特有的，两种解决方案的一般形式都是：组件不接受点击处理程序。我将它标记为可能重复，因为我不确定哪些 React Native 组件会这样做。
这不应该是重复的。您需要在 react native 中使用特定组件 (TouchableOpacity) 才能获得 onClick 功能，而在 react 中您可以在大多数原生（即非自定义）组件上使用 onClick。
这太棒了。有一个 onClick 属性，它根本不做任何事情，但是当你在某物上设置它并期望它工作时，它也不会给你任何警告或错误。糟糕的 API。

标签： reactjs react-native

【解决方案1】：

试试这个-

<TouchableOpacity onPress={this.openPopup}> 
    <View> <Text>...</Text> </View> 
</TouchableOpacity>

【讨论】：

当我使用嵌套TouchableOpacity。内部 TouchableOpacity 组件不可点击。你能帮忙吗！

【解决方案2】：

您需要使用以下包装器组件之一。以下只是列出的，可跨平台使用。

TouchableHighlight

<TouchableHighlight onPress={this.openPopup}>
    <View>...</View>
</TouchableHighlight>

TouchableOpacity

<TouchableOpacity onPress={this.openPopup}>
    <View>...</View>
</TouchableOpacity>

TouchableWithoutFeedback

<TouchableWithoutFeedback onPress={this.openPopup}>
    <View>...</View>
</TouchableWithoutFeedback>

请注意，上述内容即将被弃用。查看Pressable

【讨论】：

【解决方案3】：

layout_Provider= () => {

 this.rowRenderer= this.rowRenderer.bind(this);}
}

<TouchableOpacity
 style={styles.container}
 onPress={this.GoToEditActivity.bind(this, data.student_id, data.student_name, data.student_class, data.student_subject)}
 >

 <Image style={styles.image}
 source={{uri: data.student_pic}}/>
 {/*source={{uri: "http://homepages.cae.wisc.edu/~ece533/images/barbara.png"}}/>*/}

 <View style={styles.textContainer}>
 <Text style={styles.name}> {data.student_id}</Text>
 <Text style={styles.email}> {data.student_name}</Text>
 </View>
 <View style={styles.textContainer}>
 <Text style={styles.name}> {data.student_class}</Text>
 <Text style={styles.email}> {data.student_subject}</Text>
 </View>

</TouchableOpacity>
GoToEditActivity(student_id, student_name, student_class, student_subject) {

 console.log("GoToEditActivity ---------------------- student_id " + student_id);
 console.log("GoToEditActivity ---------------------- student_name " + student_name);
 console.log("GoToEditActivity ---------------------- student_class " + student_class);
 console.log("GoToEditActivity ---------------------- student_subject " + student_subject);

 this.props.navigation.navigate('EditActivity', {

 ID : student_id,
 NAME : student_name,
 CLASS : student_class,
 SUBJECT : student_subject,

 });
}

【讨论】：