使用数据映射反应setstate

React setstate with datamaps?

本文关键字:setstate 映射 数据      更新时间:2023-09-26

我在这个例子中使用了Datamaps。我有一个Datamap,当在.datamaps-subunit.MI中单击时,它会更改该部分的颜色。我还想在我的React状态中存储一个数字。但是,下面的代码会导致this.setState is not a function错误。

lemap:function(){
    var map = new Datamap({
        element: document.getElementById('maincontains'),
        scope: 'usa',
        fills: {defaultFill: 'rgb(217, 217, 217)'},
        done: function(datamap) {
            datamap.svg.select('.datamaps-subunit.MI').on('click', function(geography) {
                var m = {};
                var bis = this;
                m[geography.id] = 'pink';
                datamap.updateChoropleth(m);
                this.setState({trumpnum: 12});
            });
        }
    }); 
},

通过在函数下面添加var sting = this来修复它。

lemap:function(){
var sting = this;
    var map = new Datamap({
        element: document.getElementById('maincontains'),
        scope: 'usa',
        fills: {defaultFill: 'rgb(217, 217, 217)'},
        done: function(datamap) {
            datamap.svg.select('.datamaps-subunit.MI').on('click', function(geography) {
                var m = {};
                var bis = this;
                m[geography.id] = 'pink';
                datamap.updateChoropleth(m);
                sting.setState({trumpnum: 12});
            });
        }
    }); 
},