0

Olá, estou tentando criar uma calculadora usando React, porém, quando aperto no botão de um número que já havia sido enviado anteriormente ele não é passado.

Exemplo: Desejo apresentar no display o numero 77, porém, o numero 7 é enviado apenas uma vez

Ao apertar 7 duas vezes Exemplo

App.jsx

import React, { useState } from "react";
import Display from "./components/display/Display";
import Buttons from "./components/buttons/Buttons";
import './app.css'

export default App =>{

    let [btnValue, setBtnValue] = useState('')

    let sendBtnValue = e =>{
        setBtnValue(e.target.value)
    }

    return(
        <main className="mainStyle">
            <h1>calculadora</h1>
            <div className="calculatorBody">
                <Display btnValue={btnValue} />

                <div className="keyboardBody">
                    <Buttons click={sendBtnValue} size={3} >AC</Buttons>
                    <Buttons click={sendBtnValue} color={'#EB8545'} >/</Buttons>
                    <Buttons click={sendBtnValue}>7</Buttons>
                    <Buttons click={sendBtnValue}>8</Buttons>
                    <Buttons click={sendBtnValue}>9</Buttons>
                    <Buttons click={sendBtnValue} color={'#EB8545'}>*</Buttons>
                    <Buttons click={sendBtnValue}>4</Buttons>
                    <Buttons click={sendBtnValue}>5</Buttons>
                    <Buttons click={sendBtnValue}>6</Buttons>
                    <Buttons click={sendBtnValue} color={'#EB8545'}>-</Buttons>
                    <Buttons click={sendBtnValue}>1</Buttons>
                    <Buttons click={sendBtnValue}>2</Buttons>
                    <Buttons click={sendBtnValue}>3</Buttons>
                    <Buttons click={sendBtnValue} color={'#EB8545'}>+</Buttons>
                    <Buttons click={sendBtnValue} size={2}>0</Buttons>
                    <Buttons click={sendBtnValue}>.</Buttons>
                    <Buttons click={sendBtnValue} color={'#EB8545'}>=</Buttons>
                </div>
            </div>
        </main>
    )
}

Button.jsx

import React from "react";
import './button.css'

export default props =>{

    const btnStyles = {
        background: props.color || '#F1EFF1',
        width: props.size ? (props.size * 25)+'%' : '25%',
        color: props.color ? '#fff' : '#000'
    }

    return(
        <>
            <button onClick={props.click} style={btnStyles} value={props.children}>
                {props.children}
            </button>
        </>
    )
}

Display.jsx

import React, { useState } from "react"
import './display.css'
let count = ''

export default props =>{
    
    let btnValue = props.btnValue

    switch(btnValue){
        case 'AC':
            count = ''
            break
        case '=':
            count = eval(count)
            break
        default:
            count = count + btnValue
    }

    return(
        <>
            <input className="display" type='text' value={count || 0} readOnly/>
        </>
    )

}

1 Resposta 1

-3

Você não enviou o código do componente Buttons.jsx, mas vou pressupor que seja o Button.jsx, com algum erro de digitação.

O que você descreveu é o comportamento esperado. Analisemos:

Quando você clica no botão, lá no componente Button.jsx vai ser disparada a função passada no listener onClick={props.click}. Ou seja, ele vai até o componente pai e procura a prop click.

O pai é App.jsx, que, ao criar cada componente button, passa o prop click={sendBtnValue}. Ou seja: ao clicar no componente Button, rodaremos o sendBtnValue de App.jsx.

A função é a seguinte:

let sendBtnValue = e =>{
    setBtnValue(e.target.value)
}

Ela está simplesmente setando o btnValue para o value do botão, sem levar em conta o valor atualmente armazenado. Para levar em conta o valor atualmente armazenado no estado btnValue, você precisa passar uma callback para setBtnValue. Essa função recebe um parâmetro, que é o valor atual, e permite a você levar ele em conta e setar o novo valor no return.

SOLUÇÃO: Em App.jsx, altere sua função sendBtnValue para:

let sendBtnValue = e => {
    setBtnValue(prevData => `${prevData}${e.target.value}`)
    // prevData é a string atualmente contida em btnValue
}

`${prevData}${e.target.value}` é só uma forma de concatenar as strings usando template literals. Se você tentar concatenar fazendo prevData + e.target.value, corre o risco de os textos serem interpretados pelo javascript como números e somados, em vez de concatenados.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .