Estoy tratando de cambiar las clases de la etiqueta div de mi componente. Pero recibo una invocación ilegal. Aquí está mi código.

No sé lo que estoy haciendo mal? Soy nuevo en reaccionar y javascript. Estoy tratando de flotar mi div con id de power a izquierda o derecha condicionalmente como un interruptor de palanca. Recibo el error cuando hago clic en div. No al principio

let power = false;
let bank;
let target = document.getElementById;
function powerButton() {
  power = !power;
  if (power) {
    target("power").className = "float-right";
  } else {
    target("power").className = "float-left";
  }
}

class App extends React.Component {
  // eslint-disable-next-line no-useless-constructor
  constructor(props) {
    super(props);
  }

  render() {
    return (
      <
          <div
            id="controls"
            className=" d-inline-block float-right  mt-5 text-center font-weight-bold  "
            style={{ marginRight: "40px" }}
          >
            <p style={{ margin: "0" }}>Power</p>
            <div
              onClick={powerButton}
              className=" mx-auto"
              style={{
                width: "54px",
                height: "24px",
                padding: "2px",
                backgroundColor: "black",
              }}
            >
              <div
                id="power"
                style={{
                  backgroundColor: "blue",
                  width: "23px",
                  height: "19px",
                  border: "1px solid black",
                }}
              />
            </div>
            <p
              style={{
                padding: "15px 0px",
                width: "200px",
                height: "45px",
                lineHeight: "22px",
                margin: "15px 0px ",
                backgroundColor: "grey",
              }}
            >
              AAA
            </p>
            <div style={{ marginBottom: "5px" }}>
              <input style={{ color: "black" }} type="range" />
            </div>
            <p style={{ margin: "0" }}>Bank</p>
            <div
              className=" mx-auto"
              style={{
                width: "54px",
                height: "24px",
                padding: "2px",
                backgroundColor: "black",
              }}
            >
              <div
                id="bank"
                style={{
                  backgroundColor: "blue",
                  width: "23px",
                  height: "19px",
                  border: "1px solid black",
                }}
              />
            </div>
          </div>
        </div>
      </div>
    );
  }
}
0
Saad Tahmid 2 may. 2020 a las 19:45

2 respuestas

La mejor respuesta

Tienes ese error porque has perdido el "contexto" de la función, quiero decir "documento". Para resolver esto, use .bind en versiones más nuevas de Javascript:

if (power) {
  target.bind(document)("power").className = "float-right";
} else {
  target.bind(document)("power").className = "float-left";
}
0
Gustavo A Olmedo 2 may. 2020 a las 17:01

La invocación ilegal se debe a un contexto incorrecto, es decir, el objeto del documento no llama a getElementById. También en React, haga las cosas mediante actualizaciones de estado y no la manipulación directa del DOM. Primero debe comprender los conceptos básicos de JavaScript y aprender los conceptos de React de la documentación.

0
Lakshya Thakur 2 may. 2020 a las 16:56