Сделать так, чтобы по клику на любое место страницы фон этого компонента менял цвет

Question

        import styles from "./App.module.css";
import { useEffect } from "react";
import { useState } from "react";

function App() {
  const [color, setColor] = useState("orange");

  useEffect(() => {
    /* ПОДОЗРЕВАЮ что здесь должно  быть что-то вроде
     Compon.styles.class1.backgroundColor = color; */
    window.addEventListener("click", changeColor);
    return () => {
      window.removeEventListener("click", changeColor);
    };
  }, [color]);

  function changeColor(event) {
    setColor("red");
  }

  return (
    <div>
      <Compon changeColor />
    </div>
  );
}

function Compon() {
  return (
    <div className={styles.class1}>
      <input />
      <p> User name is </p>
    </div>
  );
}

export default App;

/* содержимое файла App.module.css:
 .class1 {
    background-color: orange;
    width: 400px;
    height: 400px;
    margin: 10px 35vw ;
    border: 3px solid blue;
}*/

Answer 1

Сделать так, чтобы по клику на любое место страницы фон этого компонента менял цвет

Если нужен цвет - просто передай цвет в нужный компонент и установи тот цвет нужному тегу...

//
function App() {
  const [color, setColor] = React.useState("orange");

  React.useEffect(() => {
    window.addEventListener("click", changeColor);
    return () => {
      window.removeEventListener("click", changeColor);
    };
  }, []);
  //
  function changeColor(event) {
    setColor("red");
  }

  return (
    <div>
      <Compon color={color} />
    </div>
  );
}
//
function Compon({color}) {
  const st = {backgroundColor: color}
  return (
    <div style={st}>
      <input />
      <p> User name is </p>
    </div>
  );
}

const domContainer = document.querySelector('#like_button_container');
const root = ReactDOM.createRoot(domContainer);
root.render(<App />);

<script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
<div id="like_button_container"></div>

БЛОГ НА HUSL

Сделать так, чтобы по клику на любое место страницы фон этого компонента менял цвет

Ответы (1 шт):