Остановить автоматический рендеринг на экране в React

Question

У меня есть два класса, и от одного я передаю значения другому, у меня есть кнопка в родительском классе, которая должна вызвать функцию, после которой должен отображаться контент

Родительский класс такой

импорт React из 'реакции';

import ReactDOM from 'react-dom';
//import DonutChart from 'react-donut-chart';
import propTypes from 'prop-types';
import {Display} from './Display.js';
import {DonutChart} from './DonutChart.js'

class App extends React.Component{
  constructor(props){
    super(props);
    this.state={
     text:0,
     label:'',
     value:'',
     isClicked:false,
     num:0,
     isChecked:true,
     list:[]
    }
    this.changeText=this.changeText.bind(this);
    ///this.display=this.display.bind(this);
    this.check=this.check.bind(this);
  }

  changeText(e){
    this.setState({
      label:e.target.value,   
    })     
  }
  display(){
    var num=document.getElementById('number').value; 
    var text=parseInt(num);
    var label=document.getElementById('label').value;
    this.setState({
      isClicked:true,
      text:text,
      label:''
    })


  }
  check(){
    var start_date=document.getElementById("start_date").value;
    var end_date=document.getElementById("end_date").value;

    console.log(typeof(start_date));
    if(new Date(start_date)>new Date(end_date)){
      alert("Please enter valid dates");
          this.setState({
            isChecked:false
      })
    }else{
      this.setState({
        isChecked:true
      })
      this.display();
    }

  }
  render(){
    var listElements=[];
    listElements.push(<DonutChart data={this.state.text} label={this.state.label}/>);
    return(
      <div className="row">
        <div className="col-md-6">
          <input type="text" placeholder="Enter name" id='label' onChange={this.changeText} value={this.state.label}/> 
          <input type='number' id='number'/>
          <label>Start Date:<input type="date" id="start_date"/></label>
          <label>End Date:<input type="date" id="end_date"/></label>
          <button onClick={this.check}>Click here</button>
        </div>
        <div className="col-md-6">
          {listElements}   
        </div>
      </div>
      )

  }
}

App.propTypes={
  text:propTypes.number,
  num:propTypes.number
}



ReactDOM.render(<App/>,document.getElementById('container'));

И в моем классе DonutChart у меня есть

import React from 'react';
import ReactDOM from 'react-dom';
//import DonutChart from 'react-donut-chart';
import propTypes from 'prop-types';

class DonutChart extends React.Component{
  render(){ 
    return(
      <div>
        <span>{this.props.label}</span>
      </div>
    )
  }
}


module.exports={
    DonutChart:DonutChart
}

Теперь, когда я печатаю в поле ввода, оно автоматически отображается на экране. И я хочу, чтобы он отображался по нажатию кнопки. Я не совсем понимаю концепцию связывания в реакции. Пожалуйста помоги.

Answer 1

У меня та же проблема.. я использовал componentShouldUpdate

ваш родительский класс:

import ReactDOM from 'react-dom';
//import DonutChart from 'react-donut-chart';
import propTypes from 'prop-types';
import {Display} from './Display.js';
import {DonutChart} from './DonutChart.js'

class App extends React.Component{
  constructor(props){
    super(props);
    this.state={
     text:0,
     label:'',
     value:'',
     isClicked:false,
     num:0,
     isChecked:true,
     list:[],
     updateComponent: true //new field
    }
    this.changeText=this.changeText.bind(this);
    ///this.display=this.display.bind(this);
    this.check=this.check.bind(this);
  }

  componentDidMount(){ //added
      this.setState({updateComponent:false})
  }
  changeText(e){
    this.setState({
      label:e.target.value,   
    })     
  }
  display(){
    var num=document.getElementById('number').value; 
    var text=parseInt(num);
    var label=document.getElementById('label').value;
    this.setState({
      isClicked:true,
      text:text,
      label:''
    })


  }
  check(){
    var start_date=document.getElementById("start_date").value;
    var end_date=document.getElementById("end_date").value;

    console.log(typeof(start_date));
    if(new Date(start_date)>new Date(end_date)){
      alert("Please enter valid dates");
          this.setState({
            isChecked:false
      })
    }else{
      this.setState({
        isChecked:true
      })
      this.display();
    }

  }
  render(){
    var listElements=[];
    // Added `updateComponent={this.state.updateComponent}` rendering 'DonutChart'
    listElements.push(<DonutChart updateComponent={this.state.updateComponent} data={this.state.text} label={this.state.label}/>);
    return(
      <div className="row">
        <div className="col-md-6">
          <input type="text" placeholder="Enter name" id='label' onChange={this.changeText} value={this.state.label}/> 
          <input type='number' id='number'/>
          <label>Start Date:<input type="date" id="start_date"/></label>
          <label>End Date:<input type="date" id="end_date"/></label>
          <button onClick={this.check}>Click here</button>
        </div>
        <div className="col-md-6">
          {listElements}   
        </div>
      </div>
      )

  }
}

App.propTypes={
  text:propTypes.number,
  num:propTypes.number
}



ReactDOM.render(<App/>,document.getElementById('container'));

ваш DonutChart учебный класс:

import React from 'react';
import ReactDOM from 'react-dom';
//import DonutChart from 'react-donut-chart';
import propTypes from 'prop-types';

class DonutChart extends React.Component{
  componentShouldUpdate(nextProps){ //added
     return nextProps.updateComponent       
  }
  render(){ 
    return(
      <div>
        <span>{this.props.label}</span>
      </div>
    )
  }
}


module.exports={
    DonutChart:DonutChart
}