如何在react钩子中单击时仅显示一个模式

在React钩子中，当单击时仅显示一个模态框，可以通过以下步骤实现：

首先，创建一个状态变量来控制模态框的显示与隐藏。可以使用useState钩子来创建一个布尔类型的状态变量，初始值为false，表示模态框默认是隐藏的。

const [showModal, setShowModal] = useState(false);

在需要触发显示模态框的元素上添加一个点击事件处理函数。可以使用onClick属性来绑定事件处理函数。

<button onClick={() => setShowModal(true)}>显示模态框</button>

在事件处理函数中，将状态变量设置为true，以显示模态框。
在需要显示模态框的地方，使用条件渲染来判断状态变量的值，如果为true，则显示模态框。

{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;

这样，当点击"显示模态框"按钮时，模态框将会显示出来。只有在点击按钮时，才会显示模态框，其他情况下模态框将保持隐藏状态。