javascript - 如何使用 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

你应该做的是创建一个类，其中包含你想要在 onClick 上应用的所有 css 代码。然后创建一个默认值为 false 的状态，并在 onClick 中将其设置为 true。如果状态为 true，则分配该类。

.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>

)}