如何使用 ReactJS 修改 css 屬性 onClick

Question

當我單擊另一個元素時，我想更改兩個元素的不透明度和指針事件，我進行了搜索，我能夠使用樣式和 setState 的 const 來更改不透明度（我還沒有完全理解）但它很難沒有指針事件。 我最終寫在 JQuery 中，這樣你就可以更好地理解我想要做什么。

const App = () => {

  const iluminar = () => {
    $('#oscurecido').css("opacity", 0);
    $('#oscurecido').css("pointer-events", "none");
    $('#sesion').css("opacity", 0);
    $('#sesion').css("pointer-events", "none");
  }

  return (
    <div className="App">
      <div id="oscurecido" onClick={iluminar}></div>
      <Router>
        <Nav/>
        <Switch>
          <Route path="/" exact component={Productos}/>
          <Route path="/Carrito" exact component={Carrito}/>
          <Route path="/" component={Err}/>
        </Switch>
      </Router>
      {true ? <Sesion/> : null}
    </div>
  )
}

Answer 1

您應該做的是創建一個 class，其中包含您要應用於它的所有 css 代碼 onClick。 然后創建一個 state，默認值為 false，onClick 將其設置為 true。 如果 state 為真，則分配 class。

.some-class { ...css properties }


const App = () => {
const [ iluminated, setIluminated ] = useState(false)

return (
<div className="App">
  <div id={iluminated ? 'some-class' : ''} onClick={() => setIluminated(true)}></div>
  <Router>
    <Nav/>
    <Switch>
      <Route path="/" exact component={Productos}/>
      <Route path="/Carrito" exact component={Carrito}/>
      <Route path="/" component={Err}/>
    </Switch>
  </Router>
  {true ? <Sesion/> : null}
</div>

) }