0
我试图制作一个动态饼图，其中当滑块移动时，动态饼图的值也发生变化，我制作了组件并呈现它们，但我无法引入setState由于这两种成分都没有沟通，做什么，请提示，这里是我的代码：如何在反应中添加setState
<!DOCTYPE html>
<html>
\t <head>
\t <script src="https://npmcdn.com/[email protected]/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/[email protected]/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script src="https://npmcdn.com/[email protected]/build/public/js/react-d3.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet">
\t \t
\t \t
\t </head>
\t <body>
\t \t <div class="container">
\t \t <h1 class="page-header">Dynamic Pie Chart</h1>
\t \t <div id="slider" class="col-lg-6"></div>
\t \t <div id="container" class="col-lg-6">
</div>
</div>
</div>
\t </body>
\t <script type="text/babel">
\t
\t
class Chart extends React.Component{
render() {
var PieChart = rd3.PieChart;
\t var pieData = [{label: "First", value: 50}, {label: "Second", value: 50 }];
return (
\t <PieChart
data={pieData}
width={450}
height={400}
radius={110}
sectorBorderColor="white"
/>
)}
}
Chart.propTypes={
\t pieData: React.PropTypes.arrayOf(React.PropTypes.shape({
\t \t \t \t label: React.PropTypes.string.isRequired,
\t \t \t \t value: React.PropTypes.number.isRequired })).isRequired
}
class Slider extends React.Component{
\t render(){
\t \t return (<div><input type='range' min='0' max='100' onChange = {this.props.sliderEvent} /></div>);
\t }
}
class App extends React.Component{
\t
\t \t \t constructor(props){
\t \t \t \t super(props);
\t \t \t \t this.state = {
\t \t \t \t \t pieData : [
\t \t \t \t \t \t {label: "First", value: 50}, {label: "Second", value: 50 }
\t \t \t \t \t ]
\t \t \t \t };
\t \t }
\t \t handleSliderEvent(e){
\t \t \t var slices1 = (360 * e.target.value)/100;
\t \t \t var slices2 = 360 - slices1;
\t \t \t var array1 = [
\t \t \t \t { label: "First", value: slices1 },
\t \t \t \t { label: "Second", value: slices2 }
\t \t \t ];
\t \t \t this.setState({pieData: array1});
\t \t \t
\t \t }
\t \t render(){
\t \t return(<div className="row">
\t \t \t \t <Slider sliderEvent = {this.handleSliderEvent.bind(this)}/>
\t \t \t \t <div className='col-lg-6'>
\t \t \t \t \t <Chart pieData = {this.state.pieData} />
\t \t \t \t </div>
\t \t \t \t </div>);
\t \t \t }
\t \t }
\t \t ReactDOM.render(<App/>, document.getElementById('container'));
\t </script>
</html>