我有一个图形，我想在文本周围显示一个边框。对于添加或删除边框，我的代码工作了一次，但是我的事件mouseEnter/mouseLeave工作了多次。这是为什么？
const Custom_border = (index) =>
{
data_utilisation.map((data_utilisation, index_1) =>
{
if(index == index_1)
{
console.log("In")
const add_border = document.getElementById(index)
return add_border.classList.add('nice_border')
}
})
return null
}
return <Cell cursor="pointer" key={`cell-${index}`} fill={colored[0]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
所有BarChart（Recharts API）：
<BarChart
width={400}
height={250}
data={data_utilisation}>
<CartesianGrid opacity={0.1} vertical={false} horizontal={false}/>
<XAxis axisLine={false} tickLine={false} stroke="#eeeeee00"/>
<YAxis axisLine={false} tickLine={false} stroke="#eeeeee00"/>
<Bar dataKey="uv" fill="#8884d8">
{
data_utilisation.map((data_utilisation, index) =>
{
if(data_utilisation.uv <= 5000)
{
return <Cell className="my_cell" cursor="pointer" key={`cell-${index}`} fill={colored[0]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
}
else if(data_utilisation.uv > 5000 && data_utilisation.uv <= 10000)
{
return <Cell cursor="pointer" key={`cell-${index}`} fill={colored[1]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
}
else
{
return <Cell cursor="pointer" key={`cell-${index}`} fill={colored[2]} onMouseEnter={() => Custom_border(index)} onMouseLeave={() => Custom_no_border(index)}/>
}
})
}
</Bar>
</BarChart>
显示我需要将边框放置在其上的条形图旁边的文本的代码：
<div className="Text_1">
{
data_utilisation.map((data_utilisation, index) =>
{
if(data_utilisation.uv <= 5000)
{
return <p id={index} style={{ color: colored[0]}}>{data_utilisation.name} : {data_utilisation.uv}</p>
}
else if(data_utilisation.uv > 5000 && data_utilisation.uv <= 10000)
{
return <p id={index} style={{ color: colored[1]}}>{data_utilisation.name} : {data_utilisation.uv}</p>
}
else
{
return <p id={index} style={{ color: colored[2]}}>{data_utilisation.name} : {data_utilisation.uv}</p>
}})}
</div>
如果我正确理解了您的用例，您希望在用户悬停在单元格上时显示一个边框。您可以通过css实现这一点，您只需要弄清楚如何选择单元组件。假设它有一个名为my-cell的类名，您可以简单地添加以下CSS。
.my-cell:hover {
border: 1px solid black;
}
要弄清楚组件的类名是什么，您可以在dom上检查它，如果它没有类名，您可以像这样添加它：
return <Cell className="my-cell" ... />
