Question

我的第一个React Native应用程序有一个简单的应用程序概念。单击一个数字（1到9）并显示它（在电话上拨号）。

const [numbers, setNumbers] = useState([]);
const onPress1 = () => setNumbers([...numbers, '1']); // I am saving numbers to a string

<TouchableOpacity onPress={onPress1} style={styles.dial1}>
<Text style={styles.number_style}>1</Text>
</TouchableOpacity>

<Text style={styles.dialed_number_text}> { numbers } </Text> //show the dialed numbers here.

现在，当我运行该应用程序时，这些按钮不起作用-它们不会显示。但是，当我在显示数字的行中编辑代码时，例如，将其更改为{numbers}并点击保存，就会显示数字。

打印这种数组的正确方法是什么，因为我显然做错了什么。另外，在输出我刚刚单击的电话号码时，可以节省代码长度的最佳方法是什么？我只能想到创建9个onClicks，有没有办法通过点击传递变量？

Answer 1

您应该检查自己的样式，以查看数字不显示的问题。您可以简单地传递从如下所示的可触摸不透明度的onPress中点击的数字

export default function App() {
  const [numbers, setNumbers] = useState([]);
  
  const onPress = (number) => setNumbers([...numbers, number]);

  return (
    <View style={styles.container}>
      <TouchableOpacity onPress={() => onPress('1')} style={styles.dial1}>
        <Text style={styles.number_style}>1</Text>
      </TouchableOpacity>

      <TouchableOpacity onPress={() => onPress('2')} style={styles.dial1}>
        <Text style={styles.number_style}>2</Text>
      </TouchableOpacity>
      <TouchableOpacity onPress={() => onPress('3')} style={styles.dial1}>
        <Text style={styles.number_style}>3</Text>
      </TouchableOpacity>

      <Text style={styles.dialed_number_text}> {numbers} </Text>
    </View>
  );
}

您可以尝试以下小吃 https://snack.expo.io/@guruparan/0b9574

反应挂钩无法正确显示值

1 个答案: