首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何只显示一个面板?

如何只显示一个面板?
EN

Stack Overflow用户
提问于 2020-01-17 17:57:03
回答 4查看 36关注 0票数 0

如何确保在单击时只显示秘密文本,在面板中单击了“显示”按钮。现在同时显示两个面板...

代码语言:javascript
运行
复制
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

EN

Stack Overflow用户

发布于 2020-01-17 18:05:06

代码语言:javascript
运行
复制
import React, { useState } from "react";
import "./styles.css";

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

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

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

      <div className="panel">
        <h3>Panel2</h3>
        <button onClick={() => onHandleVisible('Panel2')}>Show</button>
        {!visible && panel === 'Panel2' ? (
          <div>
            <h1>I am secret text 2</h1>
          </div>
        ) : null}
      </div>
    </div>
  );
}
票数 0
EN
查看全部 4 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/59785008

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档