React Ant工具提示悬停选择值

Question

我有带值的Select组件，当用户选择多个值时，我需要实现逻辑，它将在Select组件中以逗号分隔，并在工具提示中的悬停视图完整列表中显示。使用CCD_ 1。我在Select组件道具中使用了onMouseEnter函数，这个函数在鼠标进入时调用。但是，悬停时，该函数不会返回工具提示组件

沙盒

const tooltipValue = ["Mercedes", "BMW", 'Audi'].join(", ");
const value = ["Mercedes", "BMW", 'Audi'];
const renderToolTip = () => {
console.log("success"); 
return <Tooltip placement="topLeft" title={tooltipValue} />;
};
return (
<div>
<Tooltip placement="topLeft" title={tooltipValue}>
<Button>Tooltip</Button>
</Tooltip>
<Select
mode="multiple"
value={value}
style={{ marginLeft: 20 }}
onMouseEnter={renderToolTip}
/>
</div>
);

Answer 1

我不确定我是否完全理解你的意思，但可能是这样的？

尝试使用maxTagCount和maxTagPlaceholder

https://stackblitz.com/edit/react-wlvn1u?file=src/App.js

import React from "react";
import "./style.css";
import "antd/dist/antd.css";
import { Tooltip, Button, Select } from "antd";
export default function App() {
const tooltipValue = ["Mercedes", "BMW", 'Audi'].join(", ");
const value = ["Mercedes", "BMW", 'Audi'];
const renderToolTip = () => {
console.log("success"); 
return <Tooltip placement="topLeft" title={tooltipValue} />;
};
return (
<div>
<Tooltip placement="topLeft" title={tooltipValue}>
<Button>Tooltip</Button>
</Tooltip>
<Select
mode="multiple"
value={value}
style={{ marginLeft: 20 }}
onMouseEnter={renderToolTip}
maxTagCount={0}
maxTagPlaceholder={<Tooltip title={value.map(v=><div>{v}</div>)}>{tooltipValue}</Tooltip>}
/>
</div>
);
}