react-calendar-timeline点击弹窗无响应问题求助

核心问题分析 #

你的代码存在几个关键错误导致点击无反应：

1. 返回HTML字符串而非React元素：itemRenderer直接返回拼接的字符串，React无法解析其中的JSX语法与事件绑定，所有onClick、setState都不会生效。
2. 点击事件逻辑反向：onClick中设置showModal: false，反而会关闭模态框，与需求相反。
3. 未定义变量引用：模态框样式中的left、right以及样式属性background、color等未定义，导致渲染异常。

修正后的完整代码 #

// 假设这是类组件中的方法，确保this绑定正确
itemRenderer: ({
  item,
  itemContext,
  getItemProps,
  getResizeProps
}) => {    
  const { left: leftResizeProps, right: rightResizeProps } = getResizeProps();
  const details = item.Address;
  // 定义缺失的样式变量，可根据item属性或需求自定义
  const background = '#4CAF50';
  const color = '#fff';
  const borderColor = '#388E3C';
  const boxShadow = '0 2px 4px rgba(0,0,0,0.1)';

  // 获取Item的位置信息，用于模态框定位
  const itemStyle = getItemProps().style;

  return (
    <div 
      {...getItemProps({
        style: {
          background, 
          color, 
          borderColor, 
          boxShadow, 
          borderStyle: 'solid', 
          borderWidth: 1, 
          borderRadius: 4, 
          borderLeftWidth: itemContext.selected ? 3 : 1, 
          borderRightWidth: itemContext.selected ? 3 : 1 
        } 
      })} 
      onMouseEnter={() => this.setState({ showModal: true })}
      onMouseLeave={() => this.setState({ showModal: false })}
      onClick={() => this.setState({ showModal: true })} // 修改为true，触发弹窗
    >
      <div style={{ 
        height: itemContext.dimensions.height,
        overflow: 'hidden',
        marginLeft: '10px',
        paddingLeft: 3,
        textOverflow: 'ellipsis',
        lineHeight: '20px',
        marginTop: '15px'
      }}>
        {itemContext.title}
      </div>
      {this.state.showModal && (
        <div className='itemModal' style={{
          position: 'absolute', // 添加绝对定位
          left: itemStyle.left, // 使用Item的left位置
          top: itemStyle.top, // 使用Item的top位置
          zIndex: 1000 // 确保模态框在顶层
        }}>
          <div className='itemModalContent'>{details}</div>
        </div>
      )}
    </div>
  );
}

// 其他props保持不变，注意确保组件是类组件且state中初始化showModal
class TimelineComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showModal: false
    };
    // 如果itemRenderer不是箭头函数，需要绑定this
    // this.itemRenderer = this.itemRenderer.bind(this);
  }

  // 上面的itemRenderer方法放在这里

  render() {
    const props = {
      groups: groups,
      items: items,
      fixedHeader: 'fixed',
      canMove: false,
      canResize: true,
      itemsSorted: true,
      itemTouchSendsClick: false,
      stackItems: true,
      itemHeightRatio: 0.75,
      dragSnap: 1000 * 60 * 15,
      itemRenderer: this.itemRenderer,
      defaultTimeStart: new Date(TheMoment - (7 * OneDay)),    
      defaultTimeEnd: new Date(TheMoment + (7 * OneDay)),
      minZoom: 60 * 60 * 1000,
      maxZoom: 5 * 365.24 * 86400 * 1000,
      keys: {
        groupIdKey: 'id',
        groupTitleKey: 'title',
        itemIdKey: 'id',
        itemTitleKey: 'title',
        itemGroupKey: 'group',
        itemTimeStartKey: 'start',
        itemTimeEndKey: 'end'
      },
      onTimeChange: (visibleTimeStart, visibleTimeEnd) => {            
        if (visibleTimeStart < minTime && visibleTimeEnd > maxTime) {
          this.updateScrollCanvas(minTime, maxTime);
        } else if (visibleTimeStart < minTime) {
          this.updateScrollCanvas(minTime, minTime + (visibleTimeEnd - visibleTimeStart));
        } else if (visibleTimeEnd > maxTime) {
          this.updateScrollCanvas(maxTime - (visibleTimeEnd - visibleTimeStart), maxTime);
        } else {
          this.updateScrollCanvas(visibleTimeStart, visibleTimeEnd);
        }
      }
    };

    return React.createElement(ReactCalendarTimeline['default'], props, "The filter");
  }
}

ReactDOM.render(React.createElement(TimelineComponent), document.getElementById('main'));

关键修改说明 #

• 返回JSX元素：替换字符串拼接为标准JSX语法，让React能正确解析事件与组件。
• 修正点击事件：将onClick中的showModal设为true，触发模态框显示。
• 补充样式变量：定义缺失的样式属性，避免渲染错误。
• 模态框定位：使用itemStyle中的位置属性，结合绝对定位与z-index确保模态框正确显示在任务项附近。
• 类组件结构优化：确保showModal在state中初始化，this指向正确（若使用非箭头函数需手动绑定）。

内容的提问来源于stack exchange，提问作者P Whittaker