如何将属性“OnChangeText”上的 TextInput 的“val”转换为 int。反应原生

Posted 2023-04-18

【中文标题】如何将属性“OnChangeText”上的 TextInput 的“val”转换为 int。反应原生

【英文标题】：How to convert to int the “val” of the TextInput on the prop “OnChangeText”. React Native

【发布时间】：2021-02-11 14:10:46

【问题描述】：

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

问题出在我使用“onChangeText”道具在 TextInput 中捕获数字的那一刻。 react-native 文档说“onChangeText”道具返回一个简单的字符串值。话虽如此，我尝试使用 parseInt () 和 Number () 函数将“onChangeText”的值转换为 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>
    </>
  );
;

【参考方案1】：

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

【参考方案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