将事件侦听器附加到反应中的 svg 元素答案

【问题标题】：Attaching event listener to an svg element in react将事件侦听器附加到反应中的 svg 元素
【发布时间】：2017-02-15 04:18:43
【问题描述】：

我对 React 还是很陌生。我的 React Web 应用程序中有 d3 地图。我需要将点击事件附加到地图上。有人可以告诉我如何将点击附加到此地图吗？

const County = ({geoPath,feature}) => (
    //<path d={geoPath(feature)} style={{fill: color}} title={feature.id} />

    <path d={geoPath(feature)} style={{fill: color(Math.random()*5)}} title={feature.id} />
);

----------  
render(){
      if(!this.props.usTopoJson){
          return null;
      }else{
          let color = 'rgb(42,73,120)';
          //let color = 'orange';
          const us = this.props.usTopoJson,
                statesMesh=topojson.mesh(us,us.objects.countries.geometries,(a,b) => a !==b),
                countries = topojson.feature(us,us.objects.countries).features;
            return(
                //<g>
               <g ref={(g) => { this.myG = g; }}>
                {countries.map((feature) => 
                        <County geoPath={this.geoPath} 
                                feature={feature}
                                key={feature.id}
                                quantize={this.quantize} />)}
                 <path d={this.geoPath(statesMesh)} style={{fill:'color',stroke:'#aaa',
                                                            strokeLinejoin:'round'}}/>

                </g>
            );
      }

  }

【问题讨论】：

您是否尝试将onClick 添加为<County/> 的属性

标签： reactjs d3.js svg

【解决方案1】：

<County geoPath={this.geoPath} 
           onClick={someHandleClickFunc}
           feature={feature}
           key={feature.id}
           quantize={this.quantize} />

【讨论】：