Как добавить setState в реакцию

Question

Как добавить setState в реакцию

Я пытаюсь создать динамическую круговую диаграмму, в которой при перемещении ползунка значения динамической круговой диаграммы также меняются, я создаю компоненты и отображаю их также, но я не могу представить 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>

0

javascript reactjs react-d3

Источник

user7509541 09 мар '17 в 13:45

2 ответа

Другие вопросы по тегам javascript reactjs react-d3

user6273909 09 мар '17 в 14:44 2017-03-09 14:44 · Answer 1 · 2017-03-09 14:44

Вы должны передать реквизиты компоненту Chart

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

user7509541 10 мар '17 в 02:50 2017-03-10 02:50 · Answer 2 · 2017-03-10 02:50

Я решил проблему самостоятельно, и вот как я это сделал:

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