Question

我有一个console.log在我的REACT应用中显示正确的信息onMouseDown事件，如何更改它以便在弹出窗口中显示数据？

无论使用什么方式显示数据，我都很高兴使用Modal或将鼠标悬停在事件上。数据包含：

on item click   

{id: 3, group: 1, title: "resiting", bgColor: "#ff9800", start_time: Moment, …}
bgColor: "#ff9800"
end_time: Moment {_isAMomentObject: true, _i: "2018-10-11T15:08:00", _f: "YYYY-MM-DDTHH:mm:ss", _isUTC: false, _pf: {…}, …}
group: 1
id: 3
start_time: Moment {_isAMomentObject: true, _i: "2018-10-11T10:29:00", _f: "YYYY-MM-DDTHH:mm:ss", _isUTC: false, _pf: {…}, …}
title: "resiting"
__proto__: Object


import React, { Component } from "react";
import moment from "moment";
import Timeline from "react-calendar-timeline";
import generateFakeData from "../../generate-fake-data";

export default class App extends Component {
constructor(props) {
super(props);

const { groups, items } = generateFakeData();
const defaultTimeStart = moment()
  .startOf("day")
  .toDate();
const defaultTimeEnd = moment()
  .startOf("day")
  .add(1, "day")
  .toDate();

this.state = {
  groups,
  items,
  defaultTimeStart,
  defaultTimeEnd
};
     }

    itemRenderer = ({
    item,
    timelineContext,
    itemContext,
    getItemProps,
    getResizeProps
    }) => {
    const { left: leftResizeProps, right: rightResizeProps } = getResizeProps();
const backgroundColor = itemContext.selected
  ? itemContext.dragging
    ? "red"
    : item.selectedBgColor
  : item.bgColor;
return (
  <div
    {...getItemProps({
      style: {
        backgroundColor,
        color: "#ffffff",
        borderColor: "none",
        borderStyle: "none",
        borderWidth: 0,
        borderRadius: 0,
        borderLeftWidth: itemContext.selected ? 1 : 1,
        borderRightWidth: itemContext.selected ? 1 : 1
      },
      onMouseDown: () => {
        console.log("on item click", item);
      }
    })}
  >
    {itemContext.useResizeHandle ? <div {...leftResizeProps} /> : null}

    <div
      style={{
        height: itemContext.dimensions.height,
        overflow: "hidden",
        paddingLeft: 3,
        textOverflow: "ellipsis",
        whiteSpace: "nowrap"
      }}
    >
      {itemContext.title}
    </div>

            {itemContext.useResizeHandle ? <div {...rightResizeProps} /> : null}
          </div>
        );
      };

      render() {
        const { groups, items, defaultTimeStart, defaultTimeEnd } = this.state;

        return (
          <Timeline
            groups={groups}
            items={items}
            sidebarContent={<div>Vehicle</div>}
            sidebarWidth={60}
            lineHeight={20}
            headerLabelGroupHeight={20}
            fullUpdate={false}
            itemsSorted
            itemTouchSendsClick={false}
            stackItems
            itemHeightRatio={0.98}
            showCursorLine
            canMove={true}
            canResize={true}
            defaultTimeStart={defaultTimeStart}
            defaultTimeEnd={defaultTimeEnd}
            itemRenderer={this.itemRenderer}
          />
        );
      }
    }

您可以在https://still-river-97856.herokuapp.com/tracking上找到它

Answer 1

尝试类似的方法，您可以将ant design modal或react-modal用作模式（data = {item}）。但是逻辑是，一旦您在模式上单击“确定” /“确定”，clickedItem将设置为null，以便不再显示模式。看一下这段代码，

onMouseDown: () => {
        console.log("on item click", item);
        this.setState({clickedItem: item});
      }

onModalOkClick = () => {
     this.setState({clickedItem: null})
     }

 render() {
    const { groups, items, defaultTimeStart, defaultTimeEnd, clickedItem } = this.state;

    return (
      <div>
      <Timeline
        groups={groups}
        items={items}
        sidebarContent={<div>Vehicle</div>}
        sidebarWidth={60}
        lineHeight={20}
        headerLabelGroupHeight={20}
        fullUpdate={false}
        itemsSorted
        itemTouchSendsClick={false}
        stackItems
        itemHeightRatio={0.98}
        showCursorLine
        canMove={true}
        canResize={true}
        defaultTimeStart={defaultTimeStart}
        defaultTimeEnd={defaultTimeEnd}
        itemRenderer={this.itemRenderer}
      />
     {clickedItem ? <Modal data={clickedItem}> : null}
   </div>
    );
  }

让我知道您是否需要有关模态的帮助，或者您仍不确定如何继续。仪表盘看起来不错。：）

想要在我的REACT应用中显示onMouseDown事件的数据

1 个答案: