在使用饼图的 onChartClick
方法时,需要在回调中使用 setData
方法更新状态值,然后才能访问更新后的状态值。例如:
import { useState } from 'react';
import { Chart, Geom, Tooltip } from 'bizcharts';
const initialData = [
{ type: '分类一', value: 27 },
{ type: '分类二', value: 25 },
{ type: '分类三', value: 18 },
{ type: '分类四', value: 15 },
{ type: '分类五', value: 10 },
{ type: '其它', value: 5 },
];
const PieChart = () => {
const [data, setData] = useState(initialData);
const [selectedType, setSelectedType] = useState(null);
const handleClick = (ev) => {
const { data: clickedData } = ev;
setSelectedType(clickedData.type);
setData((prevData) => {
const newData = prevData.map((d) => {
if (d.type === clickedData.type) {
return { ...d, selected: true };
} else {
return { ...d, selected: false };
}
});
return newData;
});
};
return (
);
};
在此示例中,我们定义了 initialData
和 data
两个状态变量,并使用 useState
方法进行状态管理。在 handleClick
回调中,我们更新了 data
状态变量,并设置了 selected
属性以标识当前选中项。
注意,在更新数据后,需要重新渲染组件以显示最新的状态值。