Question

您能告诉我如何在React.js中设置/更新点击的项目吗？我希望点击元素的值更改为“test”。如何设置此类事件处理程序来执行此操作？

单击项目时，我正在尝试更新项目

.run(function ($ionicPlatform, GoogleMaps) {
  $ionicPlatform.ready(function() {
    if(window.cordova && window.cordova.plugins.Keyboard) {
      // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
      // for form inputs)
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);

      // Don't remove this line unless you know what you are doing. It stops the viewport
      // from snapping when text inputs are focused. Ionic handles this internally for
      // a much nicer keyboard experience.
      cordova.plugins.Keyboard.disableScroll(true);
    }
    if(window.StatusBar) {
      StatusBar.styleDefault();
    }
    GoogleMaps.init();
  });
})
.config(function ($stateProvider, $urlRouterProvider) {

    $stateProvider
    .state('map', {
        url: '/',
        templateUrl: 'templates/map.html',
        controller: 'MapCtrl'
    });

    $urlRouterProvider.otherwise("/");

})
.factory('Markers', function ($http) {

    var markers = [];

    return {
        getMarkers: function () {

            return $http.get("http://localhost:8080/LocationServices/markers.php").then(function (response) {
                markers = response;
                return markers;
            });

        }
    }

})

.factory('GoogleMaps', function ($cordovaGeolocation, Markers) {

    var apiKey = false;
    var map = null;
    var zoomVal = 15

    function initMap() {

        var options = { timeout: 10000, enableHighAccuracy: true };

        $cordovaGeolocation.getCurrentPosition(options).then(function (position) {

            var latLng = new google.maps.LatLng(position.coords.latitude, position.coords.longitude);

            console.log("Latitude current: ", position.coords.latitude);
            console.log("Longitude current: ", position.coords.longitude);

            var mapOptions = {
                center: latLng,
                zoom: zoomVal,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            };
            map = new google.maps.Map(document.getElementById("map"), mapOptions);

            //Wait until the map is loaded
            google.maps.event.addListenerOnce(map, 'idle', function () {

                var marker = new google.maps.Marker({
                    map: map,
                    animation: google.maps.Animation.DROP,
                    position: latLng
                });
                //Load the markers
                loadMarkers(map);
                //map.setCenter(new google.maps.LatLng(-37.92, 151.25));

            });

        }, function (error) {
            console.log("Could not get location");

            //Load the markers
            loadMarkers(map);
            //map.setCenter(new google.maps.LatLng(-37.92, 151.25));
        });

    }

    function loadMarkers(map) {

        //Get all of the markers from our Markers factory
        Markers.getMarkers().then(function (markers) {

            console.log("Markers: ", markers);
            var markersss = new Array();

            var records = markers.data.markers;

            for (var i = 0; i < records.length; i++) {

                var record = records[i];
                console.log("Latitude: ", record.lat);
                console.log("Longitude: ", record.lng);
                var markerPos = new google.maps.LatLng(record.lat, record.lng);
                console.log("marker position", "" + markerPos);

                // Add the markerto the map
                var marker = new google.maps.Marker({
                    map: map,
                    animation: google.maps.Animation.DROP,
                    position: markerPos
                });

                markersss.push(marker);

                var infoWindowContent = "<h4>" + record.name + "</h4>";

                addInfoWindow(marker, infoWindowContent, record);

            }
            autoCenter(map, markersss);
        });
    }
    function autoCenter(map1, markersss) {
        //Create a new viewpoint bound
        var bounds = new google.maps.LatLngBounds();
        //Go through each...
        for (var i = 0; i < markersss.length; i++) {
            bounds.extend(markersss[i].position);
            console.log("bounds position", "" + markersss[i].position);
        }
        //Fit these bounds to the map
        map1.fitBounds(bounds);
        map1.setCenter(bounds.getCenter());
        //remove one zoom level to ensure no marker is on the edge.
        map1.setZoom(vm.googleMap.getZoom() - 1);

        // set a minimum zoom
        // if you got only 1 marker or all markers are on the same address map will be zoomed too much.
        if (map1.getZoom() > zoomVal) {
            map1.setZoom(zoomVal);
        }
    }
    function addInfoWindow(marker, message, record) {

        var infoWindow = new google.maps.InfoWindow({
            content: message
        });

        google.maps.event.addListener(marker, 'click', function () {
            infoWindow.open(map, marker);
        });

    }

    return {
        init: function () {
            initMap();
        }
    }

})

.controller('MapCtrl', function ($scope, $state, $cordovaGeolocation) {

});

Answer 1

由于您的data对象是一个数组，我认为最简单的实现方法是向btnClick()函数发送已点击元素的id，更新该值，然后保存新状态。

Codepen

像这样：

this.state.data.map((item, i) => {
  return <li onClick = {
    this.btnClick.bind(this, i)
  > {
     item.hse
  } < /li>;
})

通过将map(item) => {更改为map(item, i) => {，您可以使用Array map方法的index参数。然后在绑定i函数时使用此btnClick变量。

btnClick(id) {
    let temp = this.state.data.slice();
    temp[id].hse = 'test';
    this.setState({
      data: temp
    });
}

此处，id是所点击项目的索引。首先创建this.state.data的浅表副本并将其放入本地temp变量。然后，更改hse的{{1}}属性。最后，使用局部变量更新temp[id]状态。

编辑：修复损坏的代码链接

如何在React.js中设置/更新点击的项目？

1 个答案: