reactjs 点击按钮展示面板当面板被展示时获取focus当失去焦点时打印失去焦点

你可以使用React的useState钩子来实现这个功能。首先，创建一个状态变量来跟踪面板是否被展示，并且创建一个函数来处理面板的获取和失去焦点事件。

import React, { useState } from "react";

const App = () => {
  const [showPanel, setShowPanel] = useState(false);

  const handleFocus = () => {
    console.log("面板获取焦点");
  };

  const handleBlur = () => {
    console.log("面板失去焦点");
  };

  return (
    <div>
      <button onClick={() => setShowPanel(!showPanel)}>点击展示面板</button>
      {showPanel && (
        <div
          onFocus={handleFocus}
          onBlur={handleBlur}
          style={{ border: "1px solid black" }}
          tabIndex={0}
        >
          面板内容
        </div>
      )}
    </div>
  );
};

export default App;

在上面的代码中，当按钮被点击时，setShowPanel函数会切换showPanel的值，从而展示或隐藏面板。面板被展示时，会显示一个带有焦点事件处理程序的div元素。当面板获取或失去焦点时，对应的事件处理函数会被触发，并打印相关信息。

注意，我们给面板元素设置了tabIndex={0}属性，以使其能够接收焦点。

希望这可以帮助到你