ReactJs: предварительно вызывается onClick - PullRequest
Новая
       3

ReactJs: предварительно вызывается onClick

0 голосов
/ 14 марта 2020

У меня есть 2 функции onClick 

function VisitGallery(name) {
  const history = useHistory();
  console.log("visitgallery", name)
  history.push("/gallery")
}

function App() {
  const accesstoken = "******************"
  const [viewport, setviewport] = React.useState({
    latitude: ******
    longitude: *******
    width: "100vw",
    height: "100vh",
    zoom: 11
  })

  const [details, setdetails] = React.useState([
  ])

  React.useEffect(() => {
    const fetchData = async () => {
      const db = firebase.firestore()
      const data = await db.collection("data").get()
      setdetails(data.docs.map(doc => doc.data()))
    }
    fetchData();
  }, [])

  const [selectedpark, useselectedpark] = React.useState(null);

  React.useEffect(() => {
    const listener = e => {
      if (e.key === "Escape") {
        useselectedpark(null);
      }
    };
    window.addEventListener("keydown", listener)

    return () => {
      window.removeEventListener("keydown", listener)
    }
  }, [])


  return (
    <div className="App">
      <ReactMapGl {...viewport}
        mapboxApiAccessToken={accesstoken}
        mapStyle="mapbox://**************"
        onViewportChange={viewport => {
          setviewport(viewport)
        }}>

        {details.map((details) =>
          <Marker key={details.name} latitude={details.lat} longitude={details.long}>

            <button class="marker-btn" onClick={(e) => {
              e.preventDefault();
              useselectedpark(details);
            }}>
              <img src={icon} alt="icon" className="navbar-brand" />
            </button>

          </Marker>

        )}

        {selectedpark ?
          (<Popup
            latitude={selectedpark.lat}
            longitude={selectedpark.long}
            onClose={() => {
              useselectedpark(null);
            }}
          >
            <div>

              <Card style={{ width: '18rem' }}>
                <Card.Body>
                  <Card.Title>{selectedpark.name}</Card.Title>
                  <Card.Text>
                    {selectedpark.postalcode}
                  </Card.Text>
                  <Button variant="primary" onClick = VisitGallery() >Visit Gallery</Button>
                </Card.Body>
              </Card>
            </div>
          </Popup>)
          : null}
        {
          console.log("in render", details)
        }

      </ReactMapGl>

    </div>
  );
}

export default App;

Внешний onClick назначается при первом создании маркера, а при нажатии вызывается функция useselectedpark, затем детали выбираются для выбранного парка.

Внутренний onClick назначен функции VisitGallery (). Когда срабатывает внутренний onClick, я хочу перейти на другую страницу, отсюда и history.pu sh ().

В идеале, я хочу, чтобы это происходило, когда запускается внешний onClick, отображается карта, и у меня есть возможность перейти на следующую страницу, которая может быть вызвана onClick внутри карты. Однако , то, что происходит сейчас, - это когда оба клика запускаются, когда я нажимаю на миниатюру. Как я могу исправить это так, чтобы я хотел, чтобы это было идеально?

ps: дайте мне знать, если мое объяснение сбивает с толку, и я отредактирую его соответственно

...