Javascript 如何在react中单击时隐藏div

我有一个div，其中有

x

，我需要隐藏整个div，单击

x

。我使用hook useState（）

.noShow{
显示：无；
}    
const[show，setShowed]=useState（false）
常量hideNav=（）=>{
设置显示（真）
} 
我是迪夫
x

---

如果我最初将Show设置为-true，它将隐藏，但当我单击

x

时，它不起作用。

您需要在大括号中添加函数，以便调用函数onclick事件

函数应用程序（）{
const[show，setShowed]=使用状态（false）；
返回(
我是迪夫
设置显示（！show）}>x
)
}

当您单击“隐藏”时，您应该调用一个函数。 像这样试试

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

export default function App() {
  const [showed, setShowed] = useState(false);
  return (
    <div
      style={showed ? { display: "none" } : { display: "block" }}
      className="d-flex justify-content-between align-center pl-2 pr-2"
    >
      <h6>this is div</h6>
      <h6 onClick={(e) => setShowed(true)}>hide</h6>
    </div>
  );
}

导入“/styles.css”； 从“react”导入{useState}； 导出默认函数App（）{ const[show，setShowed]=使用状态（false）； 返回( 我是迪夫 设置显示（真）}>隐藏 ); } 你可以在这里确认。

---

onClick={hideNav}

，使用React，您可以通过不渲染来隐藏内容。您有多个

className

属性。所以，合并它们，最好使用包<代码>类名={classnames（“abc foo bar”，“noShow”：！show}）}类似：

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

export default function App() {
  const [showed, setShowed] = useState(false);
  return (
    <div
      style={showed ? { display: "none" } : { display: "block" }}
      className="d-flex justify-content-between align-center pl-2 pr-2"
    >
      <h6>this is div</h6>
      <h6 onClick={(e) => setShowed(true)}>hide</h6>
    </div>
  );
}