Javascript 为什么在react native TextInput中从useRef获取NaN

下面是一个代码，其中有两个来自react native的文本输入和一个按钮，当我单击按钮时，结果应该是两个数字来自两个文本输入，但我得到的是

Nan

但是代码应该给我一个表示文本输入的数字

console.log（+refNum1.current.value）//给我NaN

我相信您的。值是字符串类型。使用

parseInt（）

函数将其转换为整数

例如

---

ParseInt（myNumber）

将其设置为类似这样

工作示例

import*as React from'React'；
从“react native”导入{Text，View，StyleSheet，TextInput，Button}；
导出默认函数App（）{
const TextInputRef_1=React.useRef（）；
const TextInputRef_2=React.useRef（）；
const[Result，SetResult]=React.useState（“”）；
const Generate=（）=>{
//用价值观做你喜欢的事
const a=parseInt（TextInputRef_1.current.value）；
const b=parseInt（TextInputRef_2.current.value）；
log（'Sum='，a+b）；
log（'Difference='，a-b）；
log（'Product='，a*b）；
console.log（'Division='，a/b）；
设定结果(
`总和=${a+b}\n差异=${a-b}\n产品=${
a*b
}\nDivision=${a/b}`
);
};
返回(
生成（）}/>
{Result}
);
}
const styles=StyleSheet.create({
容器：{
弹性：1，
为内容辩护：“中心”，
背景颜色：“#ecf0f1”，
填充：8，
对齐项目：“居中”，
},
文本输入：{
宽度：“100%”，
marginBottom:12，
边框颜色：“黑色”，
边框宽度：1，
填充：12，
},
});

什么是

refNum1

初始化为？请共享您的完整代码开始时的+是它给出NaN的原因，请将其删除到console。记录值我已通过应用parsInt（）转换为整数，但结果不是数字（NaN）

import * as React from 'react';
import { Text, View, StyleSheet, TextInput, Button } from 'react-native';

export default function App() {
  const TextInputRef_1 = React.useRef();
  const TextInputRef_2 = React.useRef();
  const [Result, SetResult] = React.useState('');

  const Generate = () => {
    // Do whatever you like with values
    const a = parseInt(TextInputRef_1.current.value);
    const b = parseInt(TextInputRef_2.current.value);

    console.log('Sum = ', a + b);
    console.log('Difference = ', a - b);
    console.log('Product = ', a * b);
    console.log('Division = ', a / b);

    SetResult(
      `Sum = ${a + b}\nDifference =  ${a - b}\nProduct =  ${
        a * b
      }\nDivision =  ${a / b}`
    );
  };

  return (
    <View style={styles.container}>
      <TextInput
        placeholder="Enter 1st Number"
        ref={TextInputRef_1}
        style={styles.TextInput}
      />
      <TextInput
        placeholder="Enter 2nd Number"
        ref={TextInputRef_2}
        style={styles.TextInput}
      />
      <Button title="Generate" onPress={() => Generate()} />

      <Text>{Result}</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 8,
    alignItems: 'center',
  },
  TextInput: {
    width: '100%',
    marginBottom: 12,
    borderColor: 'black',
    borderWidth: 1,
    padding: 12,
  },
});