Множество попперов на Google Картах показывают только текущий OnClick

Question

Привет всем, я пытаюсь открыть один поппер за один раз при клике.Я удивлен, что на сайте React Material нет такого примера.Прямо сейчас я пытаюсь сделать несколько маркеров с собственным поппером.Тем не менее, все попперы открываются по клику вот мой код.PS: я приложу изображение ниже, чтобы предоставить подробную информацию о моей проблеме.

handleClick = (placement, id) => event => {
    const { currentTarget } = event;
    console.log(event)
    this.setState(state => ({
      anchorEl: currentTarget,
      open: state.placement !== placement || !state.open,
      placement,
    }));
  };

render() {
   const { surveyMapEvents } = this.props.MapStore.surveyMap;
   const { position } = this.props.MapStore;
   const { anchorEl, open, placement } = this.state;
return (
<Paper>
  {surveyMapEvents && surveyMapEvents.length ? <div style={{ height: '600px', width: '100%' }}>
    <GoogleMapReact
      options={this.getMapOptions}
      bootstrapURLKeys={{ key: '' }}
      center={position}
      defaultZoom={15}
    >
      {surveyMapEvents.map((item, index) => (
        ( item.theme && 
          <MapMaker 
             aria-describedby={index} 
             key={index} 
             onClick={this.handleClick('top', index)}  
             background={item.theme.background} 
             color={item.theme.color} 
             lat={item.position.lat} 
             lng={item.position.lng}>
            <MapMakerText>{item.initial}</MapMakerText>
            <Popper id={index} open={open} anchorEl={anchorEl} placement={placement} transition>
              {({ TransitionProps }) => (
                <Fade {...TransitionProps} timeout={350}>
                  <Paper>
                    <DialogTitle>{item.name}</DialogTitle>
                  <DialogContent>
                    <DialogContentText><BoldText>Address:</BoldText> {item.address}</DialogContentText>
                    <DialogContentText><BoldText>Start at:</BoldText> {item.startTime}</DialogContentText>
                  </DialogContent>
                  <DialogActions>
                    <Button onClick={this.assign} color="primary">
                      Assign
                    </Button>
                    <Button onClick={this.delete} color="secondary">
                      Delete
                    </Button>
                    <Button onClick={this.details} color="default">
                      Details
                    </Button>
                  </DialogActions>
                  </Paper>
                </Fade>
              )}
            </Popper>
          </MapMaker> 

        )
      ))}
    </GoogleMapReact>
  </div> : <Loader />}
</Paper>
)
}

Вот изображение, которое показывает, что я всегда получаю один и тот же поппер, независимо от того, на каком маркере я нажимаю на Goggle Maps.Кто-нибудь может дать мне пример, чтобы показать только один раз, спасибо.

Answer 1

Заметили ли вы, что вы принимаете параметр id в вашем handleClick, но не используете его?

Вы создаете массив компонента Popper.Каждый из которых зависит от того же state.open, чтобы открыться и того же state.anchorEl, чтобы зависать.Поэтому, когда вы нажимаете на один маркер, все они появляются, и вы видите последний сверху.Каждый раз, когда последний остается сверху, он чувствует, что всплывет только один.

Что вы можете сделать, чтобы это исправить: Сделать anchorEl, open, placement каждый массивом:

state = {
  anchorEl: [],
  open: [],
  placement: [],
  // ...
}

Теперь визуализируем Попперов на основе этого состояния и индекса события:

<Popper
  id={index}
  key={index}
  open={open[index] || false}           // use index to find out this one's open-closed state, defaults to false
  anchorEl={anchorEl[index] || null}    // use index to find out it's achor, defaults to null
  placement={placement[index] || 'top'} // use index to find out it's placement, defaults to 'top'
  transition
>
...
</Popper>

Также используйте id, который вы отправляли на handleClick:

handleClick = (placement, index) => event => {     // i renamed the second param to index
    const { currentTarget } = event
    this.setState(state => ({
      anchorEl: {
        ...state.anchorEl,                         // keep the anchorEl for other indices same
        [index]: currentTarget,                    // only change this one
      },
      open: {
        ...state.open,                             // keep the other popper as they were
        [index]: !state.open[index],               // toggle only this one
      },
      placement: {
        ...state.placement,                        // keep the others same
        [index]: placement,                        // update placement for this one
      },
    }))
  }