reactjs 点击按钮展示面板当面板被展示时获取focus在离开时去掉focus

要实现这个功能，你可以使用React的状态来控制面板的展示和获取焦点。首先，在你的组件中定义一个状态来表示面板是否被展示：

import React, { useState } from 'react';

function App() {
  const [isPanelVisible, setPanelVisible] = useState(false);

  const handleButtonClick = () => {
    setPanelVisible(!isPanelVisible);
  };

  return (
    <div>
      <button onClick={handleButtonClick}>点击按钮</button>
      {isPanelVisible && <Panel />}
    </div>
  );
}

在上面的代码中，isPanelVisible表示面板是否被展示，setPanelVisible用于更新面板的展示状态。当按钮被点击时，handleButtonClick函数会切换面板的展示状态。

接下来，你可以创建一个Panel组件来展示面板内容，并在组件的生命周期方法中处理焦点的获取和移除：

import React, { useEffect, useRef } from 'react';

function Panel() {
  const panelRef = useRef(null);

  useEffect(() => {
    const handleFocus = () => {
      panelRef.current.focus();
    };

    const handleBlur = () => {
      panelRef.current.blur();
    };

    panelRef.current.addEventListener('focus', handleFocus);
    panelRef.current.addEventListener('blur', handleBlur);

    return () => {
      panelRef.current.removeEventListener('focus', handleFocus);
      panelRef.current.removeEventListener('blur', handleBlur);
    };
  }, []);

  return <div ref={panelRef}>面板内容</div>;
}

在上面的代码中，我们使用了useRef来创建一个引用panelRef，用于获取面板元素的引用。然后，我们使用useEffect钩子来处理面板的焦点获取和移除的逻辑。

在useEffect的回调函数中，我们首先定义了handleFocus函数来在面板被展示时获取焦点，handleBlur函数来在面板离开时移除焦点。然后，我们通过调用addEventListener来为面板元素添加focus和blur事件的监听器，并在事件发生时调用相应的处理函数。

最后，我们使用return语句来在组件卸载时移除事件监听器，以避免内存泄漏。

这样，当你点击按钮展示面板时，面板会获取焦点；当你离开面板时，焦点会被移除