React Native onpress无法正常工作

时间:2017-01-14 15:37:06

标签: react-native

似乎没有调用{p> 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>
    );
  }
}

4 个答案:

答案 0 :(得分:6)

所以这里:

<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

答案 1 :(得分:2)

使用以下行

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

或使用箭头功能

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

答案 2 :(得分:1)

你无法在onpress链接中绑定这个函数:

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

像这样使用它:

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

如果你想绑定该函数,那么试试这个:

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

干杯:)

答案 3 :(得分:0)

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

正确 import import { TouchableOpacity } from 'react-native'

有时会错误地发生奇怪的导入,例如下面的示例

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