停止自动呈现在屏幕上反应

Question

我有两个类和一个我将值传递给另一个，我在父类中的按钮，应该调用之后的内容应该得到显示

的功能父类是这样的

import从'反应'反应;

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 
}