【问题标题】：How to add setState in react如何在反应中添加setState
【发布时间】：2017-03-09 13:45:23
【问题描述】：
我正在尝试制作一个动态饼图，其中当滑块移动时，动态饼图的值也会发生变化，我已经制作了组件并渲染了它们，但我无法引入 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>
【问题讨论】：
标签：
javascript
reactjs
react-d3
【解决方案1】：
你需要获取传递给 Chart 组件的 props
<!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>
【解决方案2】：
我自己解决了这个问题，这里是我解决的方法：
<!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>