опция в select - вызов метода

Question

как мне заставить метод работать после выбора опции в select? В частности, я сохранил в каждой опции (имя, описание, x, y) имя, описание - имя с описанием отображается во всплывающем окне x, y - координаты маркера, который появится на карте.

Здесь у меня есть механизм «истории»:

state = {
    Name: '',
    Description: '',
    X: '',
    Y: '',
    elements: [],
    history: [],
    currentHistoryIndex: 0
}

 // tutaj zapisujemy wpisy w historii
  handleOnHistoryPush = () => {
    this.setState({ history: ([...this.state.history, this.state.elements]) });
    this.setState({ elements: ([]) });
  };
  // dodajemy kolejny element do aktualnych elementów
  appendElement = (Name, Description, X, Y) => this.setState({ elements: ([...this.state.elements, { Name, Description, X, Y }]) });
render(){
return(
<div ref={el => this.mapContainer = el}' ></div>
<input
              value={this.state.Name}
              onChange={e => this.setState({
                Name: e.target.value
              })}
            />
<input
              value=Description
              onChange={e => this.setState({
                Description:e.target.value
              })}
            />
<input
              value={this.state.X}
              onChange={e => this.setState({
                X: e.target.value
              })}
            />
<input
              value={this.state.Y}
              onChange={e => this.setState({
                Y: e.target.value
              })}
            />

<div style={{ display: 'flex', flexDirection: 'row' }}>
          <div>
            Wpisy<br />
            <button onClick={() => this.appendElement(this.state.Name, this.state.Description, this.state.Y, this.state.X)}>Dodaj</button>
            <button onClick={this.handleOnHistoryPush}>Zapisz</button>
            <ul>
              {this.state.elements.map(element => (

                <p>{`Nazwa: ${element.Name} opis: ${element.Description} X: ${element.X} Y: ${element.Y} `}</p>

              ))}
            </ul>
          </div>
          <div>
            Historia<br />
            <select onChange={event => this.setState({ currentHistoryIndex: event.currentTarget.value })}>
              {
                this.state.history.map((_, index) => <option key={index} value={index}>{index}</option>)
              }
            </select>
            {this.state.history[this.state.currentHistoryIndex] && (
              <ul>
                {this.state.history[this.state.currentHistoryIndex].map(historyRecord => <p>{`${historyRecord.Name} ${historyRecord.Description} ${historyRecord.Y} ${historyRecord.X}`}</p>)}
              </ul>
            )}
          </div>
        </div>
)
}

В каждой опции есть данные, и я хотел, например, чтобы пользователь, который нажмет опцию 1, имел опцию № 1 на карте, например, имея 3 точки (x, y) будут отображать эти 3 маркера на карте. Здесь у меня есть письменный метод для отображения этих точек, я просто не знаю, как я могу подключить его сейчас:

 const map = new mapboxgl.Map({
      container: this.mapContainer,
      style: 'mapbox://styles/mapbox/streets-v11',
      center: [50, 100],
      zoom: 10,
    })
for (var i = 0; i < this.state.history[currentHistoryIndex].length; i++) {
      var obj = this.state.items[i];
      let myLatlng = new mapboxgl.LngLat(obj.X, obj.Y);
      new mapboxgl.Marker()
        .setLngLat(myLatlng)
        .addTo(map);
    }

Answer 1

Как и в этом примере , вы можете добавить свои 3 опции на карту, добавить EventListener к событию выбора опции:

<script>
	mapboxgl.accessToken = 'access_token';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-77.04, 38.907],
zoom: 11.15
});
 
document
.getElementById('listing-group')
.addEventListener('change', function(e) {
var handler = e.target.id;
if (e.target.checked) {
map[handler].enable();
} else {
map[handler].disable();
}
});
</script>

Вместо map[handler].enable(); вы можете установить положение маркера с помощью marker.setLngLat([Lng, Lat]). Если вы хотите показывать только 1 маркер за раз, вы можете создать маркер после загрузки карты, а затем просто изменить положение с помощью функции marker.setLngLat([Lng, Lat]).