在React钩子中,当单击时仅显示一个模态框,可以通过以下步骤实现:
const [showModal, setShowModal] = useState(false);
<button onClick={() => setShowModal(true)}>显示模态框</button>
{showModal && (
<div className="modal">
{/* 模态框内容 */}
</div>
)}
完整的示例代码如下:
import React, { useState } from 'react';
function App() {
const [showModal, setShowModal] = useState(false);
const handleClick = () => {
setShowModal(true);
};
return (
<div>
<button onClick={handleClick}>显示模态框</button>
{showModal && (
<div className="modal">
{/* 模态框内容 */}
</div>
)}
</div>
);
}
export default App;
这样,当点击"显示模态框"按钮时,模态框将会显示出来。只有在点击按钮时,才会显示模态框,其他情况下模态框将保持隐藏状态。
领取专属 10元无门槛券
手把手带您无忧上云