javascript - 如何只显示一个面板？

Question

如何确保在单击“显示”按钮的面板中仅显示 secret 文本。现在两个面板同时显示......

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

export default function App() {
  const [visible, setVisible] = useState(true);

  const onHandleVisible = () => {
    setVisible(!visible);
  };

  return (
    <div className="App">
      <div className="panel">
        <h3>Panel1</h3>
        <button onClick={onHandleVisible}>Show</button>
        {!visible ? (
          <div>
            <h1>I am secret text</h1>
          </div>
        ) : null}
      </div>

      <div className="panel">
        <h3>Panel2</h3>
        <button onClick={onHandleVisible}>Show</button>
        {!visible ? (
          <div>
            <h1>I am secret text 2</h1>
          </div>
        ) : null}
      </div>
    </div>
  );
}

https://codesandbox.io/s/frosty-nash-nx4v6

Answer 1

建立 2 个状态

  const [visible1, setVisible1] = useState(true);
 const [visible2, setVisible2] = useState(true);

  return (
    <div className="App">
      <div className="panel">
        <h3>Panel1</h3>
        <button onClick={() => setVisible1(!visible1)}>Show</button>
        {!visible1 ? (
          <div>
            <h1>I am secret text</h1>
          </div>
        ) : null}
      </div>

      <div className="panel">
        <h3>Panel2</h3>
        <button onClick={() => setVisible2(!visible2)}>Show</button>
        {!visible2 ? (
          <div>
            <h1>I am secret text 2</h1>
          </div>
        ) : null}
      </div>
    </div>
  );
}