React Native onpress 不起作用

Question

onRadioPressed似乎

没有被调用 - 我做错了什么？ 我还需要获取"单击"项中包含的文本。

我相信我可以用event.nativeEvent.text做到这一点，对吗？

感谢您的任何帮助。

class RadioBtn extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }
  onRadioPressed(event) {
    console.log('RADIOBUTTON PUSHED:');
  }
  render() {
    return (
        <View style={styles.radioGrp}>
            <View style={styles.radioContainer}>
                <TouchableHighlight onpress={() => this.onRadioPressed.bind(this)} underlayColor='#f1c40f'>
                    <Text style={styles.radio}>Left</Text>
                </TouchableHighlight>
            </View>
            <View style={styles.radioContainer}>
                <TouchableHighlight onpress={() => this.onRadioPressed.bind(this)} underlayColor='#f1c40f'>
                    <Text style={styles.radio}>Right</Text>
                </TouchableHighlight>
            </View>
        </View>
    );
  }
}

Answer 1

所以在这里：

<TouchableHighlight onpress={() => this.onRadioPressed.bind(this)} underlayColor='#f1c40f'>
    <Text style={styles.radio}>Left</Text>
</TouchableHighlight>

首先将onpress更改为onPress。在这里() => this.onRadioPressed.bind(this)您指定了一个箭头函数，该函数返回另一个函数this.onRadioPressed.bind(this)但您从未触发它。

正确的方法：

// You can do either this
<TouchableHighlight onPress={() => this.onRadioPressed()} underlayColor='#f1c40f'>
    <Text style={styles.radio}>Left</Text>
</TouchableHighlight>
// Or you can do either this
<TouchableHighlight onPress={this.onRadioPressed.bind(this)} underlayColor='#f1c40f'>
    <Text style={styles.radio}>Left</Text>
</TouchableHighlight>

我建议查看这篇文章 https://medium.com/@housecor/react-binding-patterns-5-approaches-for-handling-this-92c651b5af56#.irpdw9lh0

Answer 2

你不能在 onpress 链接中绑定函数：

<TouchableHighlight onpress={() => this.onRadioPressed.bind(this)} underlayColor='#f1c40f'>

像这样使用它：

<TouchableHighlight onpress={() => this.onRadioPressed()} underlayColor='#f1c40f'>

如果要绑定函数，请尝试以下操作：

<TouchableHighlight onpress={this.onRadioPressed.bind(this)} underlayColor='#f1c40f'>

干杯：）

Answer 3

在下面使用行

<TouchableHighlight onPress={this.onRadioPressed.bind(this)} underlayColor='#f1c40f'>

或使用箭头功能

<TouchableHighlight onPress={() => this.onRadioPressed()} underlayColor='#f1c40f'>

Answer 4

如果 https://stackoverflow.com/a/41651845/9264008 不起作用，请检查导入TouchableOpacity的方式

✅ 正确的导入import { TouchableOpacity } from 'react-native'

有时会错误地发生奇怪的导入

下面的示例

❌ 导入import { TouchableOpacity } from 'react-native-gesture-handler'

Answer 5

我使用的是 react-native 0.66 版本，它工作正常。

import React, { useState } from 'react';
import { StyleSheet,Text,View } from "react-native";

    const App = () =>  {
    
      const [ prevCount, setCount ] = useState(1)
    
      const onPress = () => setCount(prevCount => prevCount + 1);
    
      return (
        <View style={styles.container}>
            <Text style={styles.prevCount}> {prevCount} </Text>
            <Text style={styles.pressHere} onPress={onPress} > Press Here </Text>
        </View>
      )
    
    };
    
    
    const styles = StyleSheet.create({
      container: {
        marginTop: 50
      },
      pressHere:{
        fontSize: 30
      },
      prevCount: {
        fontSize: 20,
        color: 'red'
      }
    })
    
    export default App;

此外，您可以使用此文档。