Manipulate two different values in the same input text React Native expo

Asked

Viewed 211 times

0

Good evening, I am developing a calculator to study component manipulation in React Active, using expo, however I have a logic problem, when I type the first value1, and then select one of the types of operation (add, subtract, split etc.) i wanted to leave the value1, appearing in input text for the user, however if I keep it in input text, when I go to manipulate input text data, I will end up adding it again, because when I go to get the value2 that was typed then in input text I will have value1 + value2 all in the same string, follow my code

    ChangeText = (i)=>{

        console.log(i);
        if(i >= 0 && i <= 9 && this.state.text_result != null){
            var a = this.state.text_result
            return this.setState({text_result: a + i})
        }else if ( this.state.text_result == null){return this.setState({text_result:i, previw:i})}

        switch(i){
    
            case '=':
                valor2 = this.state.text_result
                
                console.log('Valor2: ',valor2, 'Valor1: ' + valor1 );
                if(tipo == 'soma'){soma = (parseInt(valor1,10) + parseInt(valor2,10))}
                else if (tipo == 'subtracao'){soma = (parseInt(valor1,10) - parseInt(valor2,10))}
                else if (tipo == 'multiplicacao'){soma = (parseInt(valor1,10) * parseInt(valor2,10))}
                console.log(soma);
                this.setState({text_result:soma})
                break;

            case '+':
                valor1 =  this.state.text_result
                tipo = 'soma';
                this.setState({text_result: null})
                break;

            case '-':
                valor1 =  this.state.text_result
                tipo = 'subtracao';
                this.setState({text_result: null})
                break;

            case '*':
                valor1 =  this.state.text_result
                tipo = 'multiplicacao';
                this.setState({text_result: null})
                break;  

            case 'Limpa':
                var a = this.state.text_result;
                this.setState({text_result:null})    
                valor1 = null;
                valor2 = null;
                tipo = null;
                break;
        }
         
    }    

I thought of manipulating the whole string, ie letting the user type everything first, example "100+100" ai through a substring would pick up the value typed before the + and after, but also could not handle the substring in the React

1 answer

0


Taking into account that you have a string in number+symbol+number format, you could split the logo symbol on the first line of your Changetext.

const [valor1, valor2] = i.split('simbolo'); 
//split retorna um array [a,b]
//A sintaxe de *destrutor* 'destroi o array', obtendo os elementos de acordo com o índice
//Ex. '1000'.split('+')    //Resulta em [1000]
//Ex. '1000+50'.split('+') //Resulta em [1000,   50]
//                                         v      v
//                                const [valor1, valor2] = '1000+50'.split('+')

This way you will always have the value 1 and 2 separate.

Remembering that this rule would not be valid for more than one symbol.

  • Thank you very much friend, helped me a lot, I had never used the split function.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.