Изменение текстового значения после нажатия кнопки

avatar
Eder
8 августа 2021 в 17:23
75
1
2

Извините, я новичок в использовании нативных. Как мне сделать кнопку, которая меняет значение вводимого текста или просто свойства текста? Я пытаюсь создать текст и поместить ниже глобальную переменную (imc) с {}, но не получается изменить {imc} для результата переменной, так что мне теперь нужно делать? Мой код и извините за беспорядок ah:

import React, {useState} from 'react';
import { StyleSheet, View, Text, SafeAreaView, StatusBar, TextInput, TouchableOpacity, Image} from 'react-native';

export default function App() {
 
const [altura, setAltura] = useState('');
const [peso, setPeso] = useState('');
const [idade, setidade] = useState('');
const mudarResultado=()=>{};




var imc = peso / (altura*altura/10000)

 function Calcular(){
  

alert(`Altura: ${altura}cm \nPeso: ${peso}kg  \nSeu imc: ${imc.toFixed(2)} `);

if (imc < 18.5 ){
 alert("Você está muito magro");
} else if (imc > 18.5 && imc < 25){
  alert("Você está com um peso normal");
}  else if (imc >= 25 && imc < 30){
  alert("Você está com sobrepeso");
} else {
  alert("Você está na faixa de obesidade");
}


 }
 
  return(
  <SafeAreaView style={styles.container}>
    <StatusBar />

    


    <Text style={styles.titulo}>CALCULE SEU IMC</Text>

    {/* campo de texto altura */}
    <TextInput 
     style={styles.input}
    placeholder='Altura(cm)'
    keyboardType='numeric'
    value={altura}
    onChangeText={(altura)=>setAltura(altura)}
    />


{/* campo de texto peso */}

<TextInput 
     style={styles.input}
    placeholder='Peso (kg)'
    keyboardType='numeric'
    value={peso}
    onChangeText={(peso)=>setPeso(peso)}
    />

    {/* campo de texto idade */}

    <TextInput 
     style={styles.input}
    placeholder='Idade (anos)'
    keyboardType='numeric'
    value={idade}
    onChangeText={(idade)=>setidade(idade)}
    />

{/* Button */}
<TouchableOpacity style={styles.botao}onPress={Calcular}>


  <Text style={styles.btn_txt}>CALCULAR</Text>
  
</TouchableOpacity>

<Text style={styles.ideal}>Resultado IMC</Text>
<Text>   IMC: {imc} </Text>```
Источник

Ответы (1)

avatar
Mateus Marinho
8 августа 2021 в 19:25
1

Не знаю, понял ли я ваш вопрос, но, если вы хотите изменить значение переменной, нажав на кнопку, вы сначала должны поместить переменную в «память экрана», то есть в состояние, как вы сделали в: 

const [altura, setAltura] = useState('');

Итак, вы должны сделать что-то вроде этого

const [imc, setIMC] = useState(0);

И после этого создайте функцию, которая вычисляет IMC, я рекомендую вам всегда использовать стрелочную функцию, потому что она предотвращает некоторые ошибки в будущем.

    const CalculateIMC = () => {
         let imc = peso / (altura*altura/10000); // I used "let" instead of "var" because "let" only exists inside this function so it uses less memory. Think about largers aplications
         setIMC(imc); // Here you are setting the variable imc in the memory of yout screen
         // After this you can use your logic to determinates in what category the user is.
    }

После этого вы можете удалить эту строку

var imc = peso / (altura * altura / 10000)