useClipboard Hook 简介
chakra ui 提供了一个便捷的 useclipboard hook，用于简化将文本内容复制到用户剪贴板的操作。它返回一个包含以下属性和方法的对象：
- onCopy: 一个函数，调用它即可将当前 value 复制到剪贴板。
- value: Hook 内部维护的当前文本值。
- setValue: 一个函数，用于更新 Hook 内部的 value。
- hasCopied: 一个布尔值，指示内容是否已被复制（通常在短时间内变为 true，然后自动恢复为 false）。
通常，我们可以像这样使用它：
import { useClipboard, Button, Input, InputGroup, InputRightElement } from "@chakra-ui/react";
import React from "react";
function SingleInputCopy() {
const [text, setText] = React.useState("要复制的文本");
const { onCopy, value, setValue, hasCopied } = useClipboard(text);
return (
<InputGroup size="md">
<Input
pr="4.5rem"
value={value}
onChange={(e) => setValue(e.target.value)}
placeholder="输入要复制的内容"
/>
<InputRightElement width="4.5rem">
<Button h="1.75rem" size="sm" onClick={onCopy}>
{hasCopied ? "已复制!" : "复制"}
</Button>
</InputRightElement>
</InputGroup>
);
}处理多个独立输入框的挑战
当需要为页面上的多个独立输入框实现复制功能时，开发者可能会尝试复用同一个 useClipboard Hook 实例。然而，这会导致一个常见的问题：由于 value、setValue 和 hasCopied 状态都是由同一个 Hook 实例管理的，它们会在所有关联的输入框之间共享。这意味着：
- 无论用户在哪个输入框中输入内容，useClipboard 内部的 value 都可能被最后一个 setValue 调用覆盖，导致复制的内容不正确。
- 当点击任意一个复制按钮时，所有按钮的 hasCopied 状态都会同步更新，无法单独指示哪个输入框的内容被复制。
以下是尝试复用单个 useClipboard 实例的错误示例：
import { useClipboard, Button, Input, InputGroup, InputRightElement } from "@chakra-ui/react";
import { useSelector } from "react-redux"; // 假设这里使用了Redux
function IncorrectMultiInputCopy() {
const { token, prodkey } = useSelector((state) => state.apikeys); // 从Redux获取数据
// 错误：只实例化一次useClipboard，其状态会被共享
const { onCopy, value, setValue, hasCopied } = useClipboard("");
return (
<>
<InputGroup mb={4}>
<Input
value={token} // 这里的value是Redux的token
onChange={(e) => {
setValue(e.target.value); // 这里的setValue会影响共享的value
}}
/>
<InputRightElement>
<Button onClick={onCopy}>
{hasCopied ? "已复制!" : "复制"} {/* hasCopied是共享的 */}
</Button>
</InputRightElement>
</InputGroup>
<InputGroup>
<Input
value={prodkey.prodKey} // 这里的value是Redux的prodKey
onChange={(e) => {
setValue(e.target.value); // 再次调用setValue，覆盖了之前的value
}}
/>
<InputRightElement>
<Button onClick={onCopy}>
{hasCopied ? "已复制!" : "复制"} {/* hasCopied依然是共享的 */}
</Button>
</InputRightElement>
</InputGroup>
</>
);
}在上述错误示例中，无论用户修改哪个输入框，setValue 都会更新同一个 useClipboard 实例的 value。当点击复制按钮时，复制的将是最后一次被 setValue 更新的值，而不是当前输入框的实际值。同时，hasCopied 状态的共享也导致了不正确的视觉反馈。
正确的解决方案：为每个输入框独立实例化 useClipboard
解决这个问题的关键在于，为每一个需要独立复制功能的输入框，都实例化一个独立的 useClipboard Hook。这样，每个 Hook 实例都会拥有自己独立的 value、setValue 和 hasCopied 状态，互不干扰。
import { useClipboard, Button, Input, InputGroup, InputRightElement } from "@chakra-ui/react";
import { useSelector } from "react-redux";
import React from "react";
function CorrectMultiInputCopy() {
const { token, prodkey } = useSelector((state) => state.apikeys);
// 正确：为每个需要复制的输入框独立实例化useClipboard
const tokenCopy = useClipboard(token); // 实例化第一个hook，初始值为token
const prodKeyCopy = useClipboard(prodkey.prodKey); // 实例化第二个hook，初始值为prodKey
return (
<>
<InputGroup mb={4}>
<Input
value={tokenCopy.value} // 绑定到第一个hook的value
onChange={e => tokenCopy.setValue(e.target.value)} // 绑定到第一个hook的setValue
/>
<InputRightElement>
<Button onClick={tokenCopy.onCopy}> {/* 绑定到第一个hook的onCopy */}
{tokenCopy.hasCopied ? "已复制!" : "复制"} {/* 绑定到第一个hook的hasCopied */}
</Button>
</InputRightElement>
</InputGroup>
<InputGroup>
<Input
value={prodKeyCopy.value} // 绑定到第二个hook的value
onChange={e => prodKeyCopy.setValue(e.target.value)} // 绑定到第二个hook的setValue
/>
<InputRightElement>
<Button onClick={prodKeyCopy.onCopy}> {/* 绑定到第二个hook的onCopy */}
{prodKeyCopy.hasCopied ? "已复制!" : "复制"} {/* 绑定到第二个hook的hasCopied */}
</Button>
</InputRightElement>
</InputGroup>
</>
);
}
// 模拟Redux store和selector
const mockReduxState = {
apikeys: {
token: "your-secret-token-12345",
prodkey: { prodKey: "another-prod-key-xyz789" }
}
};
// 实际使用时，你需要配置Redux Store
// 这里仅为示例提供一个简单的useSelector模拟
const useSelector = (selector) => selector(mockReduxState);
// 导出组件以便在其他地方使用
export default CorrectMultiInputCopy;在上述代码中，我们为 token 和 prodKey 分别创建了 tokenCopy 和 prodKeyCopy 两个独立的 useClipboard 实例。每个实例都维护自己的状态，因此：
- 当 token 输入框的内容改变时，只有 tokenCopy.value 会更新，不会影响 prodKeyCopy.value。
- 当点击 token 旁边的复制按钮时，只有 tokenCopy.hasCopied 会变为 true，而 prodKeyCopy.hasCopied 保持不变。
这种方法确保了每个复制操作的独立性和正确性。
注意事项与最佳实践
- 初始值设定：useClipboard Hook 接受一个可选的初始值参数。在上述示例中，我们直接将从 Redux 获取的 token 和 prodKey.prodKey 作为初始值传递。如果输入框的内容是动态变化的，确保 onChange 事件能够更新 useClipboard 实例内部的 value，以便复制的是用户当前看到的内容。
- 性能考量：对于数量较多的输入框（例如，列表渲染），为每个项目创建独立的 useClipboard 实例是标准做法，通常不会引起显著的性能问题。React 的 Hooks 机制能够高效地管理这些独立的实例。
- 用户体验：hasCopied 状态提供了一个很好的机会来增强用户体验。除了改变按钮文本，你还可以考虑添加短暂的提示（如 Toast 或 Tooltip）来明确告知用户复制成功。
- 可读性：为每个 useClipboard 实例选择清晰的变量名（如 tokenCopy, prodKeyCopy）可以提高代码的可读性和可维护性。
总结
在 Chakra UI 中处理多个独立的复制到剪贴板功能时，关键在于理解 useClipboard Hook 的工作原理及其状态管理方式。避免复用单个 Hook 实例，而是为每个需要独立复制操作的元素都创建一个独立的 useClipboard 实例。通过这种方式，可以确保每个复制操作都拥有自己的独立状态和行为，从而提供准确且用户友好的功能。
