使用react antd from 表单鼠标飘过输入框 给每个·输入框填入增加复制功能
时间: 2024-02-17 09:03:31 浏览: 21
可以使用antd的Tooltip组件,结合React的useState和useRef钩子,实现输入框的复制功能和鼠标悬停提示功能。
首先,我们需要在Input组件上添加Tooltip组件作为鼠标悬停提示框,Tooltip的title属性可以用来设置提示内容,同时在Tooltip的Trigger上添加一个复制按钮。
```
import { Input, Tooltip, Icon } from 'antd';
const MyForm = () => {
const [value, setValue] = useState('');
const inputRef = useRef(null);
const handleCopy = () => {
inputRef.current.select();
document.execCommand('copy');
};
return (
<>
<Tooltip title="点击复制">
<Input ref={inputRef} value={value} onChange={(e) => setValue(e.target.value)} />
<Icon type="copy" onClick={handleCopy} />
</Tooltip>
</>
);
};
```
上面的代码中,我们使用了useState钩子来管理输入框的值,使用useRef钩子来获取输入框的引用,并在复制按钮的点击事件中使用select和execCommand('copy')方法来实现复制。同时,我们将Input和Icon组件包裹在Tooltip组件中,设置title属性来实现鼠标悬停提示功能。