0

我正在尝试制作一个动态饼图，其中当滑块移动时，动态饼图的值也会发生变化，我已经制作了组件并渲染了它们，但是我无法引入 setState，因为两个组件都没有通信，该怎么做，请建议，这是我的代码：

<!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>

4

2 回答 2

2

您需要将道具传递给图表组件

<!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>

于 2017-03-09T14:44:00.010 回答
0

我已经自己解决了这个问题，在这里我是这样做的：

<!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>

于 2017-03-10T02:50:18.170 回答