怎么在chakraUi中的button上使用forwardRef

Chakra UI 提供了 `Button` 组件，而如果你想在 Chakra UI 的按钮上使用 `forwardRef`，主要是为了更好地支持用户自定义样式或功能，并能接收外部提供的 `ref` 对象。`forwardRef` 是 React 内置的高阶组件 API，允许你将 `ref` 传递到组件的底层 DOM 元素。

以下是使用 `forwardRef` 重构 Chakra UI `Button` 的简单示例：

首先，在 Chakra UI 的 Button 组件上加上 `forwardRef`：

import { forwardRef, Button } from '@chakra-ui/core';

const CustomButton = forwardRef<HTMLButtonElement, any>((props, ref) => {
  // 你可以在这里访问传入的 ref, 比如控制焦点或修改样式等
  const handleFocus = (e: FocusEvent<HTMLButtonElement>) => {
    if (ref.current) {
      ref.current.focus();
    }
  };

  return (
    <Button {...props} ref={ref as React.RefObject<HTMLButtonElement>} onFocus={handleFocus}>
      {/* 内容 */}
    </Button>
  );
});

在这个例子中，`CustomButton` 接收了一个 `ref` 参数，将其作为第二个参数类型指定为 `HTMLButtonElement`。然后，你在组件内部直接使用这个 `ref` 对象来操作按钮的 DOM。

现在你可以像这样使用 `CustomButton`：

<CustomButton onClick={() => console.log("Clicked")} />