ReactJS | Aplicación de calculadora (agregar funcionalidad)

En nuestro artículo anterior , habíamos construido la estructura de nuestra interfaz de usuario, pero no le hemos agregado estilos ni hemos agregado ninguna funcionalidad. Puede ver que si hace clic en los botones por ahora, no se escribe nada en la pantalla. Entonces, en este artículo, intentaremos hacer que nuestra aplicación Calculadora sea completamente funcional. Una vez que nuestra aplicación sea funcional, agregaremos CSS para diseñar nuestra aplicación. 
Vamos a empezar. La primera funcionalidad que agregaremos es para el evento de clic de los botones. Para manejar los eventos de clic, crearemos una nueva función llamada handleClick y agregaremos esta función a nuestra Calculadoraclase de componente. Pero, lo siguiente a observar es que los botones de “0-9” y operadores como “+,-,*,/” tendrán roles diferentes y otros botones como “=”,”Borrar” y “Eliminar” tienen diferentes funciones. papeles Entonces, lo que podemos hacer es dentro de la función handleClick , usaremos una instrucción switch..case para realizar diferentes operaciones al hacer clic en diferentes botones. 
Pero antes de hacer esto, veamos qué estados necesitamos. Necesitamos crear dos estados para nuestra aplicación Calculadora y actualizaremos estos dos estados de acuerdo con las entradas del usuario. Los dos estados que necesitamos son: 
 

• pregunta : Inicialmente, este estado se inicializará con una string vacía. Este estado se utilizará para almacenar la entrada del usuario.
• respuesta : Inicialmente, este estado se inicializará con una string vacía. Este estado se utilizará para almacenar el resultado de la evaluación de la entrada del usuario almacenada en la pregunta de estado .

Agregue el siguiente código en la parte superior de la clase Calculadora en el archivo calculadora.js . Este código creará los estados requeridos para nosotros: 
 

constructor() {
    super();
 
    // set our default state
    this.state = {
      question: '',
      answer: ''
    }
 
    // Bind our handleClick method (sets 'this' explicitly
    // to refer to this component) We did this because 'this'
    // would refer to the source of the click events
    this.handleClick = this.handleClick.bind(this);
  }

Desde ahora, hemos creado nuestros estados para almacenar las entradas y respuestas del usuario. Simplemente completemos nuestra función handleClick para actualizar estos estados de acuerdo con diferentes clics de botón.
Agregue la siguiente función a la clase Calculadora en el archivo  calculadora.js :
 

// our method to handle all click events from our buttons
handleClick(event){
 
  // get the value from the target element (button)
  const value = event.target.value;
 
  switch (value) {
    case '=': {
 
      // if it's an equal sign, use the eval module
      // to evaluate the question ,convert the answer
      // (in number) to String
      if (this.state.question!=='')
      {
          var ans='';
            try
              {
                  ans = eval(this.state.question);
              }
              catch(err)
              {
                  this.setState({answer: "Math Error"});
              }
              if (ans===undefined)
                  this.setState({answer: "Math Error"});
 
              // update answer in our state.
              else
                  this.setState({ answer: ans , question: ''});
              break;
          }
    }
    case 'Clear': {
 
      // if it's the Clears sign, just clean our
      // question and answer in the state
      this.setState({ question: '', answer: '' });
      break;
    }
 
    case 'Delete': {
      var str = this.state.question;
        str = str.substr(0,str.length-1);
        this.setState({question: str});
        break;
    }
 
  default: {
 
      // for every other command, update the answer in the state
      this.setState({ question: this.state.question += value})
      break;
    }
  }
}

Ahora, hemos terminado de agregar todas las funcionalidades, pero aún así, si hacemos clic en los botones de nuestra aplicación Calculadora en el navegador, no sucederá nada. La razón detrás de esto es que no hemos vinculado nuestra función handleClick con el atributo onClick del botón en nuestro componente Button en el archivo button.js. Para hacerlo, pasaremos la función handleClick como accesorio al componente Button y asignaremos esta función al evento onClick del botón en el componente Button.
Agregaremos la siguiente línea en todas partes de nuestro componente Calculadora desde donde estamos llamando a nuestro componente Botón para pasar la función handleClick como accesorios al componente Botón: 
 

handleClick = {this.handleClick}

Después de agregar esto, iremos al archivo button.js y agregaremos el siguiente atributo al campo de entrada: 
 

onClick = {props.handleClick}

Ahora todo está configurado. Nuestros estados se actualizan al hacer clic en nuestros botones. Pero espere, todavía no podemos ver ningún cambio en nuestra aplicación en el navegador. Recordemos lo que salió mal. El problema es que no hemos pasado los estados al componente OutputScreen. Entonces, nuestro componente OutputScreen no tiene nada que representar en la pantalla. Entonces, actualicemos nuestros componentes OutputScreen y OutputScreenRow para aceptar accesorios y pasar los estados de pregunta y respuesta del componente Calculadora al componente OutputScreen como accesorios.
Después de hacer esto, pase los accesorios desde el interior del componente OutputScreen a los componentes OutputScreenRow como valores para mostrarlos en los campos de entrada.
A continuación se muestra nuestro archivo final outputscreen.js : 
 

// Import React (Mandatory Step).
import React from 'react';
 
// Import Output Screen Row.
import OutputScreenRow from './outputScreenRow.js';
 
// Functional Component.
// Use to hold two Screen Rows.
const OutputScreen = (props) => {
  return (
    <div className="screen">
      <OutputScreenRow value = {props.question}/>
      <OutputScreenRow value = {props.answer}/>
    </div>
  )
}
 
// Export Output Screen.
export default OutputScreen;

A continuación se muestra nuestro archivo final outputscreenrow.js : 
 

// Import React (Mandatory Step).
import React from 'react';
 
// Functional Component.
// Used to show Question/Answer.
const OutputScreenRow = (props) => {
  return (
    <div className="screen-row">
      <input type="text" readOnly value = {props.value}/>
    </div>
  )
}
 
// Export Output Screen Row.
export default OutputScreenRow;

Puede ver en la imagen a continuación que nuestra aplicación Calculadora funciona bien y tiene la misma funcionalidad que la que vimos en nuestro primer artículo. En nuestro próximo artículo, agregaremos estilos a esto e intentaremos resumir lo que hemos hecho hasta ahora para construir esta aplicación.
 

ReactJS | Aplicación de calculadora (estilo)