stackoom
  简体   繁体   中英

How to add setState in react

 原文  2017-03-09 13:45:23  7   2    javascript/ reactjs/ react-d3

Question

I am trying to make a dynamic pie chart,in which when slider moves, values of dynamic pie chart also changes, I have made components and rendered them also, but I am not able to introduce setState due to which both components are not communicating, what to do, please suggest, here is my code: 

 <!DOCTYPE html> <html> <head> <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> <script src="https://unpkg.com/react@15.0.1/dist/react-with-addons.js"></script> <script src="https://unpkg.com/react-dom@15.0.1/dist/react-dom.js"></script> <script src="https://npmcdn.com/rd3@0.6.3/build/public/js/react-d3.js"></script> <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> <h1 class="page-header">Dynamic Pie Chart</h1> <div id="slider" class="col-lg-6"></div> <div id="container" class="col-lg-6"> </div> </div> </div> </body> <script type="text/babel"> class Chart extends React.Component{ render() { var PieChart = rd3.PieChart; var pieData = [{label: "First", value: 50}, {label: "Second", value: 50 }]; return ( <PieChart data={pieData} width={450} height={400} radius={110} sectorBorderColor="white" /> )} } Chart.propTypes={ pieData: React.PropTypes.arrayOf(React.PropTypes.shape({ label: React.PropTypes.string.isRequired, value: React.PropTypes.number.isRequired })).isRequired } class Slider extends React.Component{ render(){ return (<div><input type='range' min='0' max='100' onChange = {this.props.sliderEvent} /></div>); } } class App extends React.Component{ constructor(props){ super(props); this.state = { pieData : [ {label: "First", value: 50}, {label: "Second", value: 50 } ] }; } handleSliderEvent(e){ var slices1 = (360 * e.target.value)/100; var slices2 = 360 - slices1; var array1 = [ { label: "First", value: slices1 }, { label: "Second", value: slices2 } ]; this.setState({pieData: array1}); } render(){ return(<div className="row"> <Slider sliderEvent = {this.handleSliderEvent.bind(this)}/> <div className='col-lg-6'> <Chart pieData = {this.state.pieData} /> </div> </div>); } } ReactDOM.render(<App/>, document.getElementById('container')); </script> </html>

2 answers

solution1
 2  2017-03-09 14:44:00

You need to get the props passed to Chart component 

 <!DOCTYPE html> <html> <head> <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> <script src="https://unpkg.com/react@15.0.1/dist/react-with-addons.js"></script> <script src="https://unpkg.com/react-dom@15.0.1/dist/react-dom.js"></script> <script src="https://npmcdn.com/rd3@0.6.3/build/public/js/react-d3.js"></script> <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> <h1 class="page-header">Dynamic Pie Chart</h1> <div id="slider" class="col-lg-6"></div> <div id="container" class="col-lg-6"> </div> </div> </div> </body> <script type="text/babel"> class Chart extends React.Component{ render() { var PieChart = rd3.PieChart; var pieData if(!this.props.pieData) pieData = [{label: "First", value: 50}, {label: "Second", value: 50 }]; else pieData = this.props.pieData return ( <PieChart data={pieData} width={450} height={400} radius={110} sectorBorderColor="white"/> )} } Chart.propTypes={ pieData: React.PropTypes.arrayOf(React.PropTypes.shape({ label: React.PropTypes.string.isRequired, value: React.PropTypes.number.isRequired })).isRequired } class Slider extends React.Component{ render(){ return (<div><input type='range' min='0' max='100' onChange = {this.props.sliderEvent} /></div>); } } class App extends React.Component{ constructor(props){ super(props); this.state = { pieData : [ {label: "First", value: 50}, {label: "Second", value: 50 } ] }; } handleSliderEvent(e){ var slices1 = (360 * e.target.value)/100; var slices2 = 360 - slices1; var array1 = [ { label: "First", value: slices1 }, { label: "Second", value: slices2 } ]; this.setState(function(prevState) { return {pieData: array1} }); } render(){ return(<div className="row"> <Slider sliderEvent = {this.handleSliderEvent.bind(this)}/> <div className='col-lg-6'> <Chart pieData={this.state.pieData} /> </div> </div>); } } ReactDOM.render(<App/>, document.getElementById('container')); </script> </html>

solution2
 0  2017-03-10 02:50:18

I have solved the issue on my own, and here the way I have done it: 

 <!DOCTYPE html> <html> <head> <title>Dynamic Pie Chart</title> <script src="https://npmcdn.com/react@15.3.1/dist/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> <script src="https://unpkg.com/react@15.0.1/dist/react-with-addons.js"></script> <script src="https://unpkg.com/react-dom@15.0.1/dist/react-dom.js"></script> <script src="https://npmcdn.com/rd3@0.6.3/build/public/js/react-d3.js"></script> <link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet"> </head> <body> <div class="container"> <h1 class="page-header">Dynamic Pie Chart</h1> <div id="container" class="col-lg-12"></div> </div> </body> <script type="text/babel"> class Chart extends React.Component{ render() { var PieChart = rd3.PieChart; var pieData = [{label: "First", value: 50}, {label: "Second", value: 50 }]; return ( <PieChart data={this.props.pieData} width={450} height={400} radius={110} sectorBorderColor="white" /> )} } Chart.propTypes={ pieData: React.PropTypes.arrayOf(React.PropTypes.shape({ label: React.PropTypes.string.isRequired, value: React.PropTypes.number.isRequired })).isRequired } class Slider extends React.Component{ render(){ return (<div className='col-lg-6'><input type='range' min='0' max='100' onChange = {this.props.sliderEvent} /></div>); } } class App extends React.Component{ constructor(props){ super(props); this.state = { pieData : [{label: "First", value: 50}, {label: "Second", value: 50 }] }; } handleSliderEvent(e){ var slices1 = (100 * e.target.value)/100; var slices2 = 100 - slices1; var array1 = [ { label: "First", value: slices1 }, { label: "Second", value: slices2 } ]; this.setState({pieData: array1}); console.log('slice 1:'+slices1); console.log('slice 2:'+slices2) } render(){ return(<div> <Slider sliderEvent = {this.handleSliderEvent.bind(this)}/> <div className='col-lg-6'> <Chart pieData = {this.state.pieData} /> </div> </div>); } } ReactDOM.render(<App/>, document.getElementById('container')); </script> </html>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Add element to array setState React how do I add an item on array of Objects on setState in React? how to setstate in if react native React: How to force setState()? How to setState by value in React? How to use lifeCyle and setState in react? how to setState in react using unirest How setState to nested array in react How to make setState in React synchronous How to setState a class object in React?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM