停止自動呈現在屏幕上反應

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 
}