react antd-design Form.Item 的label属性上加 Tooltip复制功能,复制内容为input输入框中的内容 点击Tooltip提示·即可直接复制
时间: 2024-02-18 20:01:05 浏览: 209
您好!根据您的需求,我可以给出以下解决思路:
1. 在需要添加 Tooltip 复制功能的 Form.Item 的 label 属性上添加 Tooltip 组件,并设置其 title 属性为需要复制的内容;
2. 在 Tooltip 组件中添加 onClick 事件,并在该事件中获取 input 输入框的 value 值,并将其复制到剪贴板中实现复制功能。
下面是具体的代码实现,仅供参考:
```
import React from 'react';
import { Form, Input, Tooltip } from 'antd';
import { CopyOutlined } from '@ant-design/icons';
const Demo = () => {
const handleCopy = () => {
const { value } = inputRef.current.input;
const textarea = document.createElement('textarea');
textarea.innerText = value;
document.body.appendChild(textarea);
textarea.select();
document.execCommand('copy');
document.body.removeChild(textarea);
};
const inputRef = React.useRef(null);
return (
<Form>
<Form.Item
label={
<Tooltip
title={
<div onClick={handleCopy}>
点击复制:
<br />
{inputRef.current?.input?.value}
</div>
}
placement="topLeft"
>
需要复制的内容:
</Tooltip>
}
>
<Input ref={inputRef} />
</Form.Item>
</Form>
);
};
export default Demo;
```
在上述代码中,我们在 Tooltip 组件的 title 属性中添加了一个可点击的 div 元素,并给该元素添加了 onClick 事件,该事件中获取 input 输入框的 value 值,并将其复制到剪贴板中。通过这种方式,当用户点击 Tooltip 组件时,即可直接复制内容到剪贴板中。
希望这可以帮助到您!如果您还有其他问题,可以继续提问。
阅读全文