使用SVG Rect On Click处理程序更改React State

Question

Generally I make sure to include a code example for my problem, however in this case my code is 100% similar to the following D3 Radio Button example , which I am simply trying to include in a react component of mine.

The relevant code from the example is the on-click handler:

.on("click",function(d,i) {
  updateButtonColors(d3.select(this), d3.select(this.parentNode))
  d3.select("#numberToggle").text(i+1)
});

however, rather than toggling a number, I am trying to change the state of my react app when this radio button is clicked. For now, let's say I'm simply trying to set the state to be one of 1, 2, or 3, that way (i + 1) is the state I'd like to set.

I tried calling setState() directly in the on click handler here, however my state didn't change. Any thoughts on how I can do this? Let me know if more of my code is needed here.

Edit: I've tried adding a snippet of what I have so far, but i'm struggling to get it to work here on stackoverflow.

 class App extends React.Component { constructor(props) { super(props); this.state = { chartType: 1 } } drawChartTypeButton() { // colors for different button states const defaultColor= "#7777BB" const hoverColor= "#0000ff" const pressedColor= "#000077" const bWidth= 8; //button width const bHeight= 5; //button height const bSpace= 1; //space between buttons const x0 = 5; //x offset const y0 = 5; //y offset const labels = [1, 2, 3]; const updateButtonColors = function(button, parent) { parent.selectAll("rect") .attr("fill",defaultColor) button.select("rect") .attr("fill",pressedColor) } // groups for each button (which will hold a rect and text) const chartTypeButton = d3.select('g.allbuttons') const buttonGroups= chartTypeButton.selectAll("g.button") .data(labels) .enter() .append("g") .attr("class", "button") .style("cursor", "pointer") .on("click", function(d,i) { updateButtonColors(d3.select(this), d3.select(this.parentNode)) this.setState({chartType: 2}) }) .on("mouseover", function() { if (d3.select(this).select("rect").attr("fill") != pressedColor) { d3.select(this) .select("rect") .attr("fill",hoverColor); } }) .on("mouseout", function() { if (d3.select(this).select("rect").attr("fill") != pressedColor) { d3.select(this) .select("rect") .attr("fill",defaultColor); } }) buttonGroups.append("rect") .attr("class","buttonRect") .attr("width",bWidth) .attr("height",bHeight) .attr("x", function(d,i) {return x0+(bWidth+bSpace)*i;}) .attr("y",y0) .attr("rx",1) //rx and ry give the buttons rounded corners .attr("ry",1) .attr("fill",defaultColor) // adding text to each toggle button group, centered // within the toggle button rect buttonGroups.append("text") .attr("class","buttonText") .attr("font-family", "arial") .attr("font-size", "0.1em") .attr("x",function(d,i) { return x0 + (bWidth+bSpace)*i + bWidth/2; }) .attr("y",y0) .attr("text-anchor","middle") .attr("dominant-baseline","central") .attr("fill","black") .text(function(d) {return d;}) } componentDidMount() { const chart = d3.select('.chart') .attr('width', 320) .attr('height', 240) .attr("viewBox", "0, 0, " + 50 + ", " + 50 + "") this.drawChartTypeButton(); } render() { return( <div className='container'> <svg className='chart'> <g className="allbuttons" /> </svg> </div> ); } } ReactDOM.render( <App />, document.getElementById('root') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id='root'> Damnit Work </div> 

Answer 1

You seem to be mixing up the this scope inside the click handler, you both use the this for the d3 selector as for the react component.

Normally we could retain the this scope using arrow functions, but as you seem to need it for d3 aswell, just create a local variable that saves the current context, so you can reuse it in your click function

// create a local reference to "this" in the drawCharTypeButton function
const self = this; 

// use the local reference to update the componenents state
.on("click", function(d,i) {
    updateButtonColors(d3.select(this), d3.select(this.parentNode));
    self.setState({chartType: 2});
})

Then your current code would be working (true it only shows the 3 buttons, and selects either of the 3)

Please note that in your sample code, the chartWidth and chartHeight variable were undefined, so I set them to 320x240 so it matches a bit with the rendering space here on SO

 class App extends React.Component { constructor(props) { super(props); this.state = { chartType: 1 } } drawChartTypeButton() { // colors for different button states const defaultColor= "#7777BB" const hoverColor= "#0000ff" const pressedColor= "#000077" const bWidth= 8; //button width const bHeight= 6; //button height const bSpace= 0.5; //space between buttons const x0 = 5; //x offset const y0 = 14; //y offset const labels = [1, 2, 3]; const updateButtonColors = function(button, parent) { parent.selectAll("rect") .attr("fill",defaultColor) button.select("rect") .attr("fill",pressedColor) } // groups for each button (which will hold a rect and text) const self = this; const chartTypeButton = d3.select('g.allbuttons') const buttonGroups= chartTypeButton.selectAll("g.button") .data(labels) .enter() .append("g") .attr("class", "button") .style("cursor", "pointer") .on("click", function(d,i) { updateButtonColors(d3.select(this), d3.select(this.parentNode)) self.setState({chartType: 2}) }) .on("mouseover", function() { if (d3.select(this).select("rect").attr("fill") != pressedColor) { d3.select(this) .select("rect") .attr("fill",hoverColor); } }) .on("mouseout", function() { if (d3.select(this).select("rect").attr("fill") != pressedColor) { d3.select(this) .select("rect") .attr("fill",defaultColor); } }) buttonGroups.append("rect") .attr("class","buttonRect") .attr("width",bWidth) .attr("height",bHeight) .attr("x", function(d,i) {return x0+(bWidth+bSpace)*i;}) .attr("y",y0) .attr("rx",5) //rx and ry give the buttons rounded corners .attr("ry",5) .attr("fill",defaultColor) // adding text to each toggle button group, centered // within the toggle button rect buttonGroups.append("text") .attr("class","buttonText") .attr("font-family", "arial") .attr("font-size", "0.1em") .attr("x",function(d,i) { return x0 + (bWidth+bSpace)*i + bWidth/2; }) .attr("y",y0+bHeight/2) .attr("text-anchor","middle") .attr("dominant-baseline","central") .attr("fill","white") .text(function(d) {return d;}) } componentDidMount() { const chart = d3.select('.chart') .attr('width', 160) .attr('height', 120) .attr("viewBox", "0, 0, " + 50 + ", " + 50 + "") this.drawChartTypeButton(); } render() { return( <div className='container'> <svg className='chart'> <g className="allbuttons" /> </svg> </div> ); } } ReactDOM.render( <App />, document.getElementById('root') ); 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script> <div id='root'> Damnit Work </div> 

A nitpick on the combination of d3 , react , best practice, you should try to do all DOM manipulations inside react instead.

Now for a chart that might not be completely possible, but those 3 buttons can easily be rendered without the need of d3

I haven't combined these rendering engines yet, so I cannot really say if there are downsides to your current approach