0

Estoy aprendiendo React Native y estoy creando una aplicación simple que realiza las soluciones de la fórmula cuadrática.

El problema está en el momento en que capturo los números en TextInput usando el prop "onChangeText". La documentación de react-native dice que el prop "onChangeText" devuelve un valor de cadena simple. Dicho esto, intenté convertir el valor de "onChangeText" a int usando las funciones parseInt () y Number (), pero nada funcionó y el resultado siempre es NaN.

¿Alguien sabe cómo convertir el valor de un TextInput a 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>
    </>
  );
};
2
  • pruaba algo como esto onChangeText={(text) => this.setState({ ValorTotal: text })}, hay que aclarar que en este ejemplo uso estados, tiene que adaptarlo a su ejemplo
    – fabrixo96
    Commented el 29 oct. 2020 a las 1:54
  • Para un componente funcional necesitas el hook de estado es.reactjs.org/docs/hooks-state.html. setState es para clases
    – loki
    Commented el 29 oct. 2020 a las 1:56

1 respuesta 1

0

puede que tengas bien el como obtienes el dato del textInput pero halla errores en tu formula matematica y por eso de como resultado NaN por lo cual es mejor que separes por pasos los resultados y no hacer todo en una linea o acomodar los parentesis para que ejecute bien la formula, hice este ejercicio como el tuyo pero usando hooks o estados, si es importante parsear a Int como decias en la pregunta.

Suerte y Bienvenido a la comunidad de SO y react.

    const App = () => {
  const [numA, setnumA] = useState();
  const [numB, setnumB] = useState();
  const [numC, setnumC] = useState();

  const operacion = () => {
    var num1 = parseInt(numA);
    var num2 = parseInt(numB);
    var num3 = parseInt(numC);

    var res = num1+num2+num3;
    alert(res);
  };

  return (
    <>
      <ScrollView>
        <View>
          <Text>Formula General</Text>
        </View>
        <View>
          <View>
            <Text>Introduce el valor de A:</Text>
            <TextInput
              placeholder="ej. 10"
              value={numA}
              onChangeText={(text) => setnumA(text)}
            ></TextInput>
          </View>
          <View>
            <Text>Introduce el valor de B:</Text>
            <TextInput
              placeholder="ej. 3"
              value={numB}
              onChangeText={(text) => setnumB(text)}
            ></TextInput>
          </View>
          <View>
            <Text>Introduce el valor de C:</Text>
            <TextInput
              placeholder="ej. 3"
              value={numC}
              onChangeText={(text) => setnumC(text)}
            ></TextInput>
            <TouchableOpacity onPress={operacion}>
              <Text>Hacer Operacion</Text>
            </TouchableOpacity>
          </View>
        </View>
      </ScrollView>
    </>
  );
};

export default App;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.