Блог

Главная - Вопросы по программированию - Состояние доступа в событии esri с использованием loadModules ReactJS

Состояние доступа в событии esri с использованием loadModules ReactJS

#javascript #reactjs #arcgis #esri #esri-loader

#javascript #reactjs #arcgis #esri #esri-загрузчик

Вопрос:

Я использую отложенную загрузку «loadModules» из esri-loader для загрузки модулей esri. Проблема здесь в том, что я не могу получить доступ к состоянию для хранения значений долготы и широты при срабатывании события ‘search-complete’. Я также не могу переопределить значение «allPlaceholder» при создании виджета поиска

https://codesandbox.io/s/pedantic-hellman-sbcdz ?

Есть идеи, что я могу делать неправильно? можно ли получить доступ к виджету поиска за пределами componentDidMount ?

Спасибо!

 import React , { Component, Fragment } from 'react';
import { loadModules } from 'esri-loader';
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';

class MapSearch extends Component {
    constructor(props) {
        super(props);
        this.mapRef = React.createRef();
        this.searchRef = React.createRef();
        this.state = {
            mysearch: null,
            longitude: 0,
            latitude: 0,
            searchTerm: ""
        };
    }
    componentDidMount() {
        loadModules(['esri/Map', 'esri/views/MapView', 'esri/widgets/Search'], { css: true })
            .then(([ArcGISMap, MapView, Search]) => {
                const map = new ArcGISMap({
                    basemap: 'osm'
                });

                this.view = new MapView({
                    container: this.mapRef.current,
                    map: map,
                    center: [-85, 35],
                    zoom: 14
                });
                var mysearch = new Search({
                    view: this.view,
                    allPlaceholder: "TESTESTTEST", // this doesn't work
                    container: this.searchRef.current
                });
                mysearch.on("search-complete", function(event){
                    console.log(event);
                   console.log(this.state);
                 }) 
            }
        );
    }
    render() {
        return (
            <Fragment>
                <Row >
                    <Col lg={7}><div className="arcmap" style={{"height": "50vh"}}  ref={this.mapRef}></div></Col>
                    <Col lg={5}><div className="zobya-search" style={{ "wdith": "100%" }} ref={this.searchRef} ></div></Col>
                </Row>
            </Fragment>
        );
    }
}
export default MapSearch;

Это оказалось очень простым, надеюсь, это поможет кому-то еще

 just add a binding in the constructor such as

this.handleSearchComplete = this.handleSearchComplete.bind(this); 

and create a new function  

handleSearchComplete(event) {
        this.setState({
            longitude: event.results[0].results[0].feature.geometry.longitude , 
            latitude: event.results[0].results[0].feature.geometry.latitude
       });
    } 
then call this callback function such as
mysearch.on("search-complete", this.handleSearchComplete)

Комментарии:

1. Если вы используете функцию со стрелкой, привязка не требуется. mysearch.on(«поиск завершен», ($event) => {})

2. вы должны опубликовать свое решение в качестве ответа, а не в исходном вопросе. я только что потратил 15 минут на написание решения, прежде чем прокрутить дальше вниз, чтобы увидеть edit / facepalm. вы разобрались с заполнителем?

3. моя ошибка, обновлено. Я еще не разобрался с заполнителем, но, похоже, вам нужно создать новый LocatorSearchSource и использовать его вместо этого. Мне все еще нужно попробовать это. Подробнее в developers.arcgis.com/javascript/latest/api-reference /…

Ответ №1:

Это оказалось очень простым, надеюсь, это поможет кому-то еще

просто добавьте привязку в конструктор, например

 this.handleSearchComplete = this.handleSearchComplete.bind(this);

и создайте новую функцию

 handleSearchComplete(event) {
        this.setState({
            longitude: event.results[0].results[0].feature.geometry.longitude , 
            latitude: event.results[0].results[0].feature.geometry.latitude
       });
    }

затем вызовите эту функцию обратного вызова, такую как

 mysearch.on("search-complete", this.handleSearchComplete)