如何将道具"OnChangeText"上的TextInput的"val"转换为i

Question

我正在学习React Native，我正在创建一个简单的应用程序来执行二次公式的求解。

问题是在我使用"；onChangeText；道具react原生文档表示；onChangeText；prop返回一个简单的字符串值。话虽如此，我试图将"；onChangeText；使用parseInt((和Number((函数将其转换为int，但没有任何结果，结果总是NaN。

有人知道如何将TextInput的值转换为int吗？

const App = () => {

var _a;
var _b;
var _c;
var res1;
var res2;
const result = () => {
Number(_a);
Number(_b);
Number(_c);
res1 = -1 * b + Math.sqrt(Math.pow(b, 2) - (4 * a * c)) / (2 * a);
res2 = -1 * b + Math.sqrt(Math.pow(b, 2) - (4 * a * c)) / (2 * a);
}

return (
<>
<ImageBackground source={image} style={styles.img}>
<ScrollView>
<View style={styles.title}>
<Text style={styles.title_text}>
Formula General 
</Text>
</View>
<View style={{marginTop: 10}}>
<View style={styles.container}>
<Text style={styles.text}>
Introduce el valor de A:
</Text>
<TextInput style={styles.textinput} placeholder='ej. 10' onChangeText={(val) => a_=val}></TextInput>
</View>
<View style={styles.container}>
<Text style={styles.text}>
Introduce el valor de B:
</Text>
<TextInput style={styles.textinput} placeholder='ej. 3' onChangeText={(val) => b_ = val}></TextInput>
</View>
<View style={styles.container}>
<Text style={styles.text}>
Introduce el valor de C:
</Text>
<TextInput style={styles.textinput} placeholder='ej. 3' onChangeText={(val) => c_set=val}></TextInput>
<TouchableOpacity style={{backgroundColor:'#07057E', marginTop: 95, width: 100, marginLeft:0, position: 'absolute', paddingLeft: 20, paddingBottom:20, paddingRight: 20, paddingTop: 10}} onPress={operacion}>
<Text style={{color:'#fff', fontWeight:'bold', fontSize:11}}>Hacer Operacion</Text>
</TouchableOpacity>
</View>
</View>
<View style={{alignItems: 'flex-start', flexDirection:'column', justifyContent:'flex-start', position: 'absolute'}}>
<View style={styles.result}>
<Text style={styles.text}>
Resultado:
</Text>
<Text style={styles.res}>
Solucion 1: {res1}{'n'}{'n'}{'n'}{'n'}{'n'}
Solucion 2: {res2}
</Text>
</View>
</View>
</ScrollView>
</ImageBackground>
</>
);
};

Answer 1

当输入为空时，结果为NaN。在使用parseInt之前，您需要检查文本val。如果为空，则可以返回默认值。如果该输入仅用于数字；keyboardType="数字"是更好的选择。

Answer 2

您可以使用状态。我把你的代码换成了另一个版本。负的平方根将得到NaN。如果要处理较大的位，请使用BigInt。

import * as React from 'react';
import { useState } from 'react';
import { Text, View, StyleSheet,TextInput,Component } from 'react-native';
import Constants from 'expo-constants';
/* global BigInt */
// You can import from local files
import AssetExample from './components/AssetExample';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';
export default function App()  {

const [a,setA] = useState(1);
const [b,setB] = useState(20);
const [c,setC] = useState(-1);
const [res1,setRest1] = useState(0);
const [res2,setRest2] = useState(0);

const result1 = () => {
return -1 * b + Math.sqrt(Math.pow(b, 2) - (4 * a * c)) / (2 * a);
}
const result2= () =>{
return  BigInt(10**100);//Math.sqrt(-5);
}
return (
<View style={styles.container}>
<Text style={styles.paragraph}>
Result 1:{result1()}
</Text>
<Text style={styles.paragraph}>
Result 2:{result2().toString()}
</Text>
<TextInput placeholder='Input a Here' onChangeText={(val) => setA(val) }></TextInput>
<TextInput placeholder='Input b Here' onChangeText={(val) => setB(val) }></TextInput>
<TextInput placeholder='Input c Here' onChangeText={(val) => setC(val) }></TextInput>
<Card>
<AssetExample />
</Card>
</View>
);
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
paddingTop: Constants.statusBarHeight,
backgroundColor: '#ecf0f1',
padding: 8,
},
paragraph: {
margin: 24,
fontSize: 18,
fontWeight: 'bold',
textAlign: 'center',
},
});

https://snack.expo.io/@zawhtutwin/so-64585929