我使用重新绘制图表实现了条形图。我希望在单击条形图时在图表区域外显示一个新的div元素,该元素将显示与条形图相关的附加信息。我添加了一个函数,该函数将返回需要在onClick事件中显示的div元素。
<BarChart width={1130} height={450} data={data}>
<CartesianGrid strokeDasharray="3 3" />
<XAxis dataKey="endTime" tickFormatter={time => moment.unix(time).format('DD MMM')} />
<YAxis />
<Tooltip content={this.renderTooltip} />
<Legend verticalAlign="top" height={36} />
<Brush dataKey='endTime' height={30} stroke="#1984CD" tickFormatter={time => moment.unix(time).format('DD MMM')} onChange={this.handleBrushChange.bind(this)} />
<Bar barSize={20} name="process duration" dataKey="duration" fill="#1984CD" onClick={this.onBarClick.bind(this)} />
</BarChart>
onBarClick(bar) {
console.log("bar clicked", bar);
return (
<div className='infoPanel'>
<Box colorIndex="light-1" pad="small" margin="small">
<p>StartTime: {moment.unix(bar.startTime).format('MMM Do YYYY, h:mm:ss')}</p>
<p>EndTime: {moment.unix(bar.endTime).format('MMM Do YYYY, h:mm:ss')}</p>
<p>Event: <span> {bar.aname}</span> {bar.evtime1}</p>
<p>Event: <span> {bar.aname2}</span> {bar.evttime2}</p>
<p>Event: {bar.aname3} at {bar.evtime3}</p>
</Box>
</div>
);
}
.infoPanel {
margin-top: 5em;
color: #666;
background-color: aquamarine;
}
函数被调用并正确运行,但我在任何地方都看不到div元素。是否不可能在不添加新组件的情况下添加新的div元素?
2条答案
按热度按时间aoyhnmkz1#
在你的情况下,你返回了组件,但没有在任何地方呈现它。你可以做的是在DOM的某个地方有条件地呈现,并使用一个状态来显示或不显示你正在呈现的内容。
例如,您可以使用以下两种方法:
然后在渲染函数的某个地方:
vdgimpew2#
我在谷歌上找到了这个答案。作者的学分不是我的。
https://jsfiddle.net/ydycdLpx/5/