Question

我正试图通过一个非常简单的应用程序来解决本机的问题，该应用程序将记录我按下按钮的次数。这是我的代码和输出。

代码：

import React from 'react';
import { View, Text, Button} from 'react-native';

let numOfTimesPressed1 = 0;
let numOfTimesPressed2 = 0;

function printTimesPressed(num) {
  if (num == 1) {
    numOfTimesPressed1 += 1;
    console.log("Log In Button was pressed " + numOfTimesPressed1 + ".");
  } else {
    numOfTimesPressed2 += 1;
    console.log("Log In Button was pressed " + numOfTimesPressed2 + ".");
  }
}

class HomeScreen extends React.Component {

  render() {
    return (
      <View>
        <Text>Page Master</Text>
        <Button
          title="Log In"
          onPress={printTimesPressed(1)}
          >
        </Button>
        <Button
          title="Sign Up"
          onPress={printTimesPressed(2)}
          >
        </Button>
      </View>
    );
  }
}

export default HomeScreen;

这是我多次按下两个按钮之后的输出：

 LOG  Running "PageMaster" with {"rootTag":1}
 LOG  Log In Button was pressed 1.
 LOG  Log In Button was pressed 1.

为什么不更新？

Answer 1

onPress希望传递一个函数。您的代码传递的不是函数，而是调用未定义的printTimesPressed(1)的结果

onPress={printTimesPressed(1)} // wrong: printTimesPressed(1) is not a function but a code that returns nothing

你想要的是这个

onPress={() => printTimesPressed(1)} // () => printTimesPressed(1) is a function

onPress={function() { printTimesPressed(1) }} // same thing

现在onPress收到匿名箭头函数，该函数将在执行时（按下按钮时）使用各自的参数调用printTimesPressed

Answer 2

发生这种情况是因为React所基于的函数是无状态的。这是函数式编程的专长。这意味着，函数无法计数，并且在传递完全相同的参数时将始终发挥完全相同的作用。您必须将数字保存在其他位置（例如，处于某种状态），以计算调用函数的频率。在这里，您可以找到一个React Counter Button的示例：https://wsvincent.com/react-counter/

Answer 3

首先，请在类中声明变量和函数，然后尝试使用最新的ECMAScript（ES）。这是根据标准更新的代码，主要问题是onPress处理，因为您尝试使用旧的ES版本会导致问题，最后在一个类直接导出该类的情况下

import React from 'react';
import { View, Text, Button } from 'react-native';

export default class HomeScreen extends React.Component {
  numOfTimesPressed1 = 0;
  numOfTimesPressed2 = 0;
  render() {
    return (
      <View>
        <Button title="Log In" onPress={()=>this.printTimesPressed(1)} />
        <Button title="Sign Up" onPress={()=>this.printTimesPressed(2)} />
      </View>
    );
  }
  printTimesPressed = (num) => {
    if (num == 1) {
      this.numOfTimesPressed1 += 1;
      console.log('Log In Button was pressed ' + this.numOfTimesPressed1 + '.');
    } else if (num == 2) {
      this.numOfTimesPressed2 += 1;
      console.log('Sign up Button was pressed ' + this.numOfTimesPressed2 + '.');
    }
  }
}

控制台日志在React Native中仅显示一次

3 个答案: