Использование троичного оператора в функции карты дает оба результата - PullRequest
Новая
       5

Использование троичного оператора в функции карты дает оба результата

2 голосов
/ 02 июля 2019

Я создаю вертикальную временную шкалу с чередующимися сторонами карт при перемещении по временной шкале. Я пытаюсь включить эффект Поповер, чтобы показать больше информации о человеке / событии, которое заполняет противоположный пробел на временной шкале.

Я пытаюсь добиться этого, используя тернарный оператор (используя модуль для чередования сторон по порядку) в моем обратном вызове карты, но он рендерит / возвращает оба возможных результата Popover, onClick приводит к появлению Popover на обоихстороны карты. 

render() {
    const cards = timelineObjects.map((card, i) => (
      <React.Fragment key={i}>

        {i % 2 === 0 ? (
          <VerticalTimelineElement
            className="vertical-timeline-element--work"
            key={i}
            iconStyle={{
              background: "rgb(40,49,72)",
              color: "#000"
            }}
            paddingTop="0em"

            //icon={<Print/>}
          >
            <div>
              <Card className="card">
                <CardActionArea>
                  <CardMedia
                    style={{ height: 0, paddingTop: "100%" }}
                    image={card.image}
                  />
                  <CardContent>
                    <Typography gutterBottom variant="h5" component="h2">
                      {card.title}
                    </Typography>
                    <Typography component="p">{card.subtitle}</Typography>
                  </CardContent>
                </CardActionArea>

                <Button
                  size="small"
                  color="primary"
                  component={Link}
                  //to={card.path}
                  onClick={this.handlePop}
                >
                  Learn More, index: {i}, RIGHT
                </Button>
                <Popover
                  open={this.state.popped}
                  anchorEl={this.state.anchorEl}
                  anchorOrigin={{
                    horizontal: "right",
                    vertical: "center "
                  }}
                  transformOrigin={{
                    horizontal: "right",
                    vertical: "bottom"
                  }}
                  onClose={this.handleRequestClose}
                >
                  Right popover text
                </Popover>
              </Card>
            </div>
          </VerticalTimelineElement>
        ) 
        : 

        (
          <VerticalTimelineElement
            className="vertical-timeline-element--work"
            key={i}
            iconStyle={{
              background: "rgb(40,49,72)",
              color: "#000"
            }}
            paddingTop="0em"

            //icon={<Print/>}
          >
            <div>
              <Card className="card">
                <CardActionArea>
                  <CardMedia
                    style={{ height: 0, paddingTop: "100%" }}
                    image={card.image}
                  />
                  <CardContent>
                    <Typography gutterBottom variant="h5" component="h2">
                      {card.title}
                    </Typography>
                    <Typography component="p">{card.subtitle}</Typography>
                  </CardContent>
                </CardActionArea>

                <Button
                  size="small"
                  color="primary"
                  component={Link}
                  //to={card.path}
                  onClick={this.handlePop}
                >
                  Learn More, index : {i}, LEFT
                </Button>
                <Popover
                  open={this.state.popped}
                  anchorEl={this.state.anchorEl}
                  anchorOrigin={{
                    horizontal: "left",
                    vertical: "center "
                  }}
                  transformOrigin={{
                    horizontal: "left",
                    vertical: "bottom"
                  }}
                  onClose={this.handleRequestClose}
                >
                  Left popover text
                </Popover>
              </Card>
            </div>
          </VerticalTimelineElement>
        )}
      </React.Fragment>
    ));

Вот скриншот результата.

1 Ответ

0 голосов
/ 02 июля 2019

Все ваши всплывающие окна привязаны к одному и тому же элементу (this.state.anchorEl) и все настроены на открытие на основе одного и того же логического значения (this.state.popped). Это означает, что если у вас есть 2+ объекта на вашей временной шкале, вы визуализируете всплывающее окно для каждого объекта, и все всплывающие окна будут открываться или закрываться вместе, и все будут слева / справа от единственного элемента привязки (что бы это ни было).

Вероятно, вам следует создать новый компонент TimelineObject, который визуализирует один объект временной шкалы и может иметь собственное локальное состояние и назначает собственный локальный anchorEl для привязки его всплывающего окна. Возможно, его собственное состояние popped. Тогда ваша функция карты будет больше похожа на:

timelineObjects.map((card, i) => <TimelineObject key={i} card={card} onLeft={i%2==0} />)

В качестве альтернативы, вместо использования this.state.popped в качестве логического значения, используйте его в качестве картотеки для отображения всплывающего окна. И в вашем Popover коде сделайте:

<Popover open={this.state.popped === i} ...

И когда вы установите popped установите его как this.setState({popped: indexOfCardToShowPopover, anchorEl: elementOfCardToAnchorPopover });

Таким образом, одновременно открывается только 1 поповер.

...