javascript - React Native touchableopacity onpress 不起作用

Question

我是 React Native(或任何 JS 框架)的新手，我正在尝试制作一个简单的点击游戏，一旦你点击蓝色方 block ，它就会随机呈现在不同的位置，然后你点击再次，依此类推。到目前为止，这是我的代码:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';

import styles from './src/styles/style';

export default class App extends Component<{}> {

    constructor(props) {
        super();
        this.state = {
        showStartButton: true, // change back to true
        score: 0
    }
}

startGame() {
    this.setState({
       showStartButton: !this.state.showStartButton
    });
    this.renderFirstStage();
}

score() {
    this.setState({
        showStartButton: !this.state.showStartButton,
        score: score+1
    });
}

renderStartButton() {
    return (
        <TouchableOpacity style={styles.startButton} onPress={()=>this.startGame()}>
            <Text style={styles.startButtonText}>START</Text>
        </TouchableOpacity>
    );
}

renderWhiteBox() {
    return (
        <View style={{flex: 1, backgroundColor: 'white'}} />
    );
}

renderBlueBox() {
    return (
        <View style={{flex: 1, backgroundColor: 'blue'}} />
    );
}

renderFirstStage() {
    var blueColNum = Math.floor(Math.random() * 6);
    var blueRowNum = Math.floor(Math.random() * 4);
    var col1 = ['white', 'white', 'white', 'white', 'white', 'white'];
    var col2 = ['white', 'white', 'white', 'white', 'white', 'white'];
    var col3 = ['white', 'white', 'white', 'white', 'white', 'white'];
    var col4 = ['white', 'white', 'white', 'white', 'white', 'white'];

    if (blueRowNum == 0)
        col1[blueColNum] = 'blue';
    else if (blueRowNum == 1)
        col2[blueColNum] = 'blue';
    else if (blueRowNum == 2)
        col3[blueColNum] = 'blue';
    else if (blueRowNum == 3)
        col4[blueColNum] = 'blue';

    return (
        <View style={{flex: 1, flexDirection: 'row'}}>
            <View style={{flex: 1}}>
                <View style={styles.scoreBoard}><Text style={styles.timerText}>Time: {blueRowNum}</Text></View>
                {col1.map(function(el){
                    if (el == 'blue')
                        return (
                            <TouchableOpacity style={{flex: 1, backgroundColor: el}} onPress={()=>this.score()} />
                        );
                    else
                        return (
                            <View style={{flex: 1, backgroundColor: el}} />
                        );
                })}
            </View>
            <View style={{flex: 1}}>
                <View style={{flex: 1, backgroundColor: 'gray'}} />
                {col2.map(function(el){
                    if (el == 'blue')
                        return (
                            <TouchableOpacity style={{flex: 1, backgroundColor: el}} onPress={()=>this.score()}/>
                        );
                    else
                        return (
                            <View style={{flex: 1, backgroundColor: el}} />
                        );
                })}
            </View>
            <View style={{flex: 1}}>
                <View style={{flex: 1, backgroundColor: 'gray'}} />
                {col3.map(function(el){
                    if (el == 'blue')
                        return (
                            <TouchableOpacity style={{flex: 1, backgroundColor: el}} onPress={()=>this.score()} />
                        );
                    else
                        return (
                            <View style={{flex: 1, backgroundColor: el}} />
                        );
                })}
            </View>
            <View style={{flex: 1}}>
                <View style={styles.scoreBoard}><Text style={styles.timerText}>Score: {this.state.score}</Text></View>
                {col4.map(function(el){
                    if (el == 'blue')
                        return (
                            <TouchableOpacity style={{flex: 1, backgroundColor: el}} onPress={()=>this.score()} />
                        );
                    else
                        return (
                            <View style={{flex: 1, backgroundColor: el}} />
                        );
                })}
            </View>
        </View>
    );
}

render() {
    return (
        <View style={styles.container}>
            {this.state.showStartButton ? this.renderStartButton() : null}
                {!this.state.showStartButton ? this.renderFirstStage() : null}
            </View>
        );
    }
}

所以这是很多代码，但为了上下文的缘故，我想将它们全部包含在内。无论如何，我遇到的问题是我的 renderFirstStage() 函数。在返回语句中看到我正在调用 onPress 事件处理程序来运行函数 this.score 吗？好的，所以当我运行程序并点击其中一个 TouchableOpacities 时，我收到一条错误消息:_this5.score 不是函数... _this5.score 未定义。我最好的猜测是，因为我从 JSX 中的 JS 代码中调用 onPress={()=>this.score}，所以我无法访问 App 类中的方法。所以我认为范围有问题，或者可能不是，我不知道。即使我的直觉是正确的，我也不知道如何纠正它。如何从我的 TouchableOpacity 组件中调用 score 方法？我尝试过的任何东西似乎都不适合我......

注意:我在 MacBook pro 上运行 iPhone 7 模拟器。

Answer 1

是的，它存在范围问题，您需要在构造函数中将函数与this上下文绑定(bind)

constructor(props) {
    super();
    this.state = {
        showStartButton: true, // change back to true
        score: 0
    }
    this.renderFirstStage = this.renderFirstStage.bind(this);
}

或者您可以简单地使用call立即调用函数并将其与this绑定(bind)

{!this.state.showStartButton ? this.renderFirstStage.call(this) : null}