google-maps-реакции onClick onMarkerClick от дочернего компонента компонента - PullRequest
Новая
       30

google-maps-реакции onClick onMarkerClick от дочернего компонента компонента

0 голосов
/ 12 мая 2019

Я хотел бы нажать на </Main> дочерний компонент, называемый <RenderTable/>, и активировать метод onMarkerClick, используемый в <MapContainer />, это отобразит <InfoWindow/>.Может быть, мне нужно сделать единственный источник правды в app.js и, возможно, передать значение key или json для сопоставления с маркером?

Раздел файла app.js компонентовэто примерно так: 

function App() {
  return (
    <div className="App">
      <Main />
      <MyTaxiMain />
      <MapContainer />
    </div>
  );
}

export default App;

Вот секция map.js, которая контролирует <MapContainer />: 

 return (
      <div className="map-class">
        <Map
          google={this.props.google}
          style={style}
          initialCenter={{
            lat: 53.5511,
            lng: 9.9937
          }}
          zoom={13}
        >
          {Car2go.placemarks.map((content, index) => {
            return (
              <Marker
                title={(index + 1).toString()}
                name={content.name}
                interior={content.interior}
                exterior={content.exterior}
                type="car2go"
                position={{
                  lat: content.coordinates[1],
                  lng: content.coordinates[0]
                }}
                onClick={this.onMarkerClick}
                icon={{
                  url: require("../images/car2go-pin.svg"),
                  anchor: new google.maps.Point(5, 58)
                }}
                key={index}
              />
            );
          })}

Я использую файл Car2go json для рендерингадлинный и лат на карте.

1 Ответ

1 голос
/ 12 мая 2019

Преобразование App компонента в компонент класса, создание объекта состояния и привязка метода класса. 

class App extends React.Component {
  constructor(props) {
    super(props); // needed because we're using state and also, binding a method.
    this.state = { isMainClicked: false };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick() {
    // do whatever needs to be done.
    // change the value of "isMainClicked" to true
    this.setState({ isMainClicked: true });
  }

  render() {
    return (
      <div className="App">
        <Main handleClick={this.handleClick} />
        <MyTaxiMain />
        <MapContainer isMainClicked={this.state.isMainClicked} />
      </div>
    );
  }
}

Внутри, передайте handleClick реквизит в, затем вызовите handleClick() внутриметода, который предназначен для активации onMarkerClick.

Затем внутри вызовите onMarkerClick, когда isMainClicked равен true.

Это должно сделать это.

...