在Chakra UI中高效使用useClipboard处理多个输入框的复制功能

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>
  );
}

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>
    </>
  );
}

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;