如何只显示一个面板？
如何只显示一个面板？
提问于 2020-01-17 17:57:03
如何确保在单击时只显示秘密文本，在面板中单击了“显示”按钮。现在同时显示两个面板...
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>
);
}回答 4
Stack Overflow用户
发布于 2020-01-17 18:02:38
创建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>
);
}Stack Overflow用户
发布于 2020-01-17 18:05:06
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>
);
}Stack Overflow用户
发布于 2020-01-17 18:09:35
两个都使用相同的变量，使用两个变量来跟踪哪一个是打开的。
https://codesandbox.io/s/blazing-fire-0dng2
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [visiblePanel1, setVisiblePanel1] = useState(true);
const [visiblePanel2, setVisiblePanel2] = useState(true);
const onHandleVisible = panel => {
if (panel === 1) {
setVisiblePanel1(!visiblePanel1);
} else if (panel === 2) {
setVisiblePanel2(!visiblePanel2);
}
};
return (
<div className="App">
<div className="panel">
<h3>Panel1</h3>
<button onClick={() => onHandleVisible(1)}>Show</button>
{!visiblePanel1 ? (
<div>
<h1>I am secret text</h1>
</div>
) : null}
</div>
<div className="panel">
<h3>Panel2</h3>
<button onClick={() => onHandleVisible(2)}>Show</button>
{!visiblePanel2 ? (
<div>
<h1>I am secret text 2</h1>
</div>
) : null}
</div>
</div>
);
}如果有多个面板，则编辑
import React, { useState } from "react";
import "./styles.css";
export default function App() {
const [visible, setVisible] = useState(true);
const [panelName, setPanelName] = useState();
const onHandleVisible = panel => {
setVisible(!visible);
setPanelName(panel);
};
return (
<div className="App">
<div className="panel">
<h3>Panel1</h3>
<button onClick={() => onHandleVisible("panel1")}>Show</button>
{!visible && panelName === "panel1" ? (
<div>
<h1>I am secret text</h1>
</div>
) : null}
</div>
<div className="panel">
<h3>Panel2</h3>
<button onClick={() => onHandleVisible("panel2")}>Show</button>
{!visible && panelName === "panel2" ? (
<div>
<h1>I am secret text 2</h1>
</div>
) : null}
</div>
</div>
);
}还更新了codesandbox。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59785008
复制相关文章
相似问题
腾讯云开发者
