2

Esto es una calculadora sencilla, comencé con React hace poco y se que la utilidad de la misma es para no trabajar directamente con el DOM, pero tengo este problema.

function Calculator(props){

    const show = () =>{
        let number = document.querySelector('.button');
        setAnswer(answer+ number.innerHTML)
    };
    const [answer,setAnswer] = useState('');

    return(
        <div className="component">
            <div className="calculator-component">
                <div className="calculator-component-answer">
                    {answer}
                </div>
                <div className="calculator-component-conteiner">
                    <div className="row">
                        <button onClick={show} className="button">1</button>
                        <button onClick={show} className="button">2</button>
                        <button onClick={show} className="button">3</button>
                        <button onClick={show} className="button">+</button>
                    </div>
                </div>
            </div>
        </div>
    );  
};

export default Calculator;
1
  • Cuál es el problema? Commented el 5 jul. 2023 a las 14:38

2 respuestas 2

1

Bienvenid@ a la comunidad,

Se puede usar el atributo value del elemento button y react syntetic event para pasar el event object como parametro a la función handler onClick, luego se extrae el valor para cada botón en específico:

export default function App() {
  
  const [answer, setAnswer] = useState('');
  const show = (event) =>{
    //let number = document.querySelector('.button');
    let { value } = event.target;
    console.log(value)
    //setAnswer(answer+ number.innerHTML)
  };

  return(
      <div className="component">
          <div className="calculator-component">
              <div className="calculator-component-answer">
                  {answer}
              </div>
              <div className="calculator-component-conteiner">
                  <div className="row">
                      <button onClick={show} className="button" value="1" >1</button>
                      <button onClick={show} className="button" value="2" >2</button>
                      <button onClick={show} className="button" value="3" >3</button>
                      <button onClick={show} className="button" value="4" >+</button>
                  </div>
              </div>
          </div>
      </div>
  );  
}
0

Es bastante sencillo, solo desde de usar useRef, esto viene siendo una variable distinta a useState o las por defecto de JavaScript

import { useRef } from 'react'

function Component() {
  const ref = userRef(null)
}

como puedes ver la sintaxis es bastante sencilla, useRef puede almacenar información de Elementos JSX gracias al atributo ref

return (
  <div ref={ref}></div>
)

esto guardará su referencia, gracias a eso tendrás acceso a toda su información con ref.current dentro de un useEffect

useEffect(() => {
  !ref?.current && return

  console.log(ref.current.innerHTML) 
}, [])

Así puedes acceder al innerHTML sin necesidad de usar querySelector o un getElement

Y si te lo preguntas también puedes hacer esto: ref.current.addEventListener() es válido porque estás accediendo al elemento como tal.

Recuerda siempre hacerlo dentro de un useEffect para que él red pueda obtener el elemento, el useEffect lo que hará es esperar a que se pinte por primera vez el DOM, entonces podrás obtener el elemento y podrás interactuar con él.

Te invito a hacer un console.log(ref) dentro de un useEffect para que veas todos los atributos que tiene.

Disclaimer: va a llegar un momento que tendrás más 1 ref, llámalos de esta forma: nombreIndentificadorRef, así sabrás que es un ref y a que le hace ref

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.