Reactjs 隐藏显示 div react 的状态

发布于03月19日

假设我有一个div元素

<div
     style={{
                borderTopLeftRadius: "10px",
                borderTopRightRadius: "10px",
                background: "#edf2f8",
                border: "1px solid #edf2f8",
                borderBottom: "0px",
                width:"300px",
                marginLeft:"20px",
                backgroundPosition: "center",
                
              }}

  >
    hello world
 </div>

我想使用onclick函数隐藏/显示div的状态.例如，当用户单击div时，我将其隐藏..我怎样才能做到这一点呢？

推荐答案

将显示值存储在组件状态，并通过onClick处理程序进行切换.有条件地呈现整个div.

例子:

function App() {
  const [display, setDisplay] = React.useState(true);

  return (
    <div className="App">
      {display && (
        <div
          onClick={() => setDisplay(false)}
          style={{
            borderTopLeftRadius: "10px",
            borderTopRightRadius: "10px",
            background: "#edf2f8",
            border: "1px solid #edf2f8",
            borderBottom: "0px",
            width: "300px",
            marginLeft: "20px",
            backgroundPosition: "center"
          }}
        >
          hello world
        </div>
      )}
      <button type="button" onClick={() => setDisplay(true)}>
        Reply
      </button>
    </div>
  );
}