1

Estoy realizando una calculadora con reactjs y todo esta bien, mi único problema es que quiero que el resultado cuando tenga parte decimal mande solo dos decimales al input, eso lo consigo hacer con toFixed(2) solo que cuando el resultado es un numero entero manda los dos decimales también 20.00.

¿Cómo hago para que solo mande los decimales cuando el numero no sea entero?

Aquí adjunto evento del resultado

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
// import App from './App';

const Calculator = () => {
  return (
    <div className="container">
      <Buttons />
    </div>
  );
};

class Buttons extends React.Component {
  constructor() {
    super();
    this.state = {
      currentValue: '0',
    };
    this.handleAddDecimals = this.handleAddDecimals.bind(this);
    this.handleEvaluate = this.handleEvaluate.bind(this);
    this.handleClear = this.handleClear.bind(this);
  }

  handleClick = value => {
    const { currentValue } = this.state;
    this.setState({
      currentValue: currentValue === '0' ? String(value) : currentValue + value,
    });
  };

  handleAddDecimals = () => {
    const { currentValue } = this.state;
    if (currentValue.indexOf('.') === -1) {
      this.setState({
        currentValue: currentValue + '.',
      });
    }
  };

  handleEvaluate = () => {
    const { currentValue } = this.state;
    this.setState({
      currentValue: eval(currentValue),
    });
  };

  // handleEvaluate = () => {
  //   const { currentValue } = this.state;
  //   let fixedNum =
  //     currentValue % 1 === 0
  //       ? parseFloat(currentValue).toFixed(0)
  //       : parseFloat(currentValue).toFixed(2);
  //   this.setState({
  //     currentValue: eval(fixedNum),
  //   });
  // };


  handleClear = () => {
    this.setState({
      currentValue: '0',
    });
  };

  render() {
    const { currentValue } = this.state;

    return (
      <div>
        <input id="display" value={currentValue} />
        <div className="button-div">
          <button id="zero" onClick={() => this.handleClick(0)}>
            0
          </button>
          <button id="one" onClick={() => this.handleClick(1)}>
            1
          </button>
          <button id="two" onClick={() => this.handleClick(2)}>
            2
          </button>
          <button id="three" onClick={() => this.handleClick(3)}>
            3
          </button>
          <button id="four" onClick={() => this.handleClick(4)}>
            4
          </button>
          <button id="five" onClick={() => this.handleClick(5)}>
            5
          </button>
          <button id="six" onClick={() => this.handleClick(6)}>
            6
          </button>
          <button id="seven" onClick={() => this.handleClick(7)}>
            7
          </button>
          <button id="eight" onClick={() => this.handleClick(8)}>
            8
          </button>
          <button id="nine" onClick={() => this.handleClick(9)}>
            9
          </button>

          <button id="add" onClick={() => this.handleClick('+')}>
            +
          </button>
          <button id="subtract" onClick={() => this.handleClick('-')}>
            -
          </button>
          <button id="multiply" onClick={() => this.handleClick('*')}>
            *
          </button>
          <button id="divide" onClick={() => this.handleClick('/')}>
            /
          </button>
          <button id="decimal" onClick={this.handleAddDecimals}>
            .
          </button>
          <button id="equals" onClick={this.handleEvaluate}>
            =
          </button>
          <button id="clear" onClick={this.handleClear}>
            C
          </button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<Calculator />, document.getElementById('root'));

4
  • ¿Cuál es la operación que te manda 20.00 en el resultado? O algúna otra operación con la que estes haciendo la prueba del caso que nos reportas, saludos
    – g.4
    Commented el 9 feb. 2021 a las 17:03
  • No me es posible emular el problema que describes con el código de la pregunta, no veo ningún problema de mi lado, la calculadora funciona bien ¿Podrías verificar?
    – g.4
    Commented el 9 feb. 2021 a las 17:56
  • handleEvaluate = () => { const { currentValue } = this.state; this.setState({ currentValue: eval(currentValue), }); }; cuando el resultado retorna un entero colocandole el toFixed(2) a la función eval me retorna los .00 y al sustituirla con el codigo que esta comentado deja de funcionar
    – LuismGil
    Commented el 9 feb. 2021 a las 21:21
  • Justo actualizé la respuesta, el componente ya funciona como necesitas, lo verifique de mi lado, quedo en espera de tus comentarios.
    – g.4
    Commented el 10 feb. 2021 a las 0:02

2 respuestas 2

1

Intenta con esta versión del método handleEvaluate, en tu App:

  handleEvaluate = () => {
    const { currentValue } = this.state;
    let resultToCast = eval(currentValue);
    
    let fixedResult =
       (resultToCast % 1 === 0)
         ? resultToCast.toFixed(0)
         : resultToCast.toFixed(2);
    
    this.setState({
      currentValue: fixedResult,
    });
  };

Notas de campo

Se recíbe un dato tipo string en this.state, el método eval ejecuta la operación aritmética en su versión string, regresa un tipo number:

    //const { currentValue } = this.state;
    const currentValue = "6/2";
    console.log("string: ",currentValue);
    console.log(typeof currentValue);
    let resultToCast = eval(currentValue);
    console.log("resultToCast", resultToCast);
    console.log(typeof resultToCast);

Luego, se verifica si el número dentro de resultToCast es entero, esto se hace con el operador reminder; además, se hace uso de una validación con el operador condicional.

Dependiendo del resultado de esta validación, se usa toFixed para dejar dos decimales(fraccionario) o ninguno, con su valor por default 0 (entero):

(resultToCast % 1 === 0)
         ? resultToCast.toFixed(0)
         : resultToCast.toFixed(2);

Nótese que hasta este punto, resultToCast es de tipo number.

Al aplicar el método toFixed a resultToCast, también se hace un Cast , con esto se transforma resultToCast de tipo number a tipo string, tal y como venía desde this.state.

Finalmente, el resultado de la validación se asigna a fixedResult:

let fixedResult = (resultToCast % 1 === 0) ? resultToCast.toFixed(0) : resultToCast.toFixed(2);

Aquí, un ejemplo en JS:

const handleEvaluate = (expresion) => {
    //const { currentValue } = this.state;
    const currentValue = expresion;
    console.log("expresion: ",currentValue);
    console.log(typeof currentValue);
    let resultToCast = eval(currentValue);
    console.log("resultToCast", resultToCast);
    console.log(typeof resultToCast);
    let fixedResult = (resultToCast % 1 === 0) ? resultToCast.toFixed(0) : resultToCast.toFixed(2);
    console.log("fixedResult", fixedResult);
    console.log(typeof fixedResult);
    /* React stuff
    this.setState({
      currentValue: fixedResult,
    });*/
  };
  
  handleEvaluate("6/2");//entero
  handleEvaluate("4/3");//fraccionario

Espero que esta respuesta sea de ayuda.

5
  • Esta muy interesante tu respuesta, pero al aplicarla no me funciona... Primer error que me arroja es ´currentValue.toFixed is not a function´, eso lo intento solucionar con un parseFloat(currentValue).toFixed(2); pero al incluirle mi funcion eval() deja de funcionar, incluire mi codigo completo en la pregunta, creo que estoy declarando alguna cosa mal
    – LuismGil
    Commented el 9 feb. 2021 a las 10:47
  • Lo reviso y te mando una nueva versión
    – g.4
    Commented el 9 feb. 2021 a las 16:28
  • Excelente! me ha funcionado, muchisimas gracias y excelente explicación, realmente entendi la logica ahora.
    – LuismGil
    Commented el 10 feb. 2021 a las 1:03
  • Qué bien, es un buen ejercicio para estudiar tipos de datos, si consideras que la respuesta fue útil puedes votar por ella, suerte y salud.
    – g.4
    Commented el 10 feb. 2021 a las 1:12
  • Fui de mucha utilidad amigo!, nuevamente gracias y ya vote por ella pero.. debido a que no tengo reputación suficiente aun mi voto no aparece publicamente...
    – LuismGil
    Commented el 10 feb. 2021 a las 12:03
0

puedes usar la funcion Number() de javascript para solucionarlo o su version corta

que es colocando un simbolo de + antes de la variable.

ejemplo:

entero = 4;
decimal = 2.33;

etf = entero.toFixed(2);
dtf= decimal.toFixed(2);

// decimal
numberDecimal = Number(dtf);
console.log(numberDecimal )
// entero
numberEntero = Number(etf)
console.log(numberEntero )

// forma corta "se coloca el simbolo + delante"
console.log(+etf )
console.log(+dtf )

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.