Question

我有两个类，从一个我传递值到另一个，我在父类中有一个按钮，它应该调用一个函数，之后应该显示内容

父类就像这样

从'react'导入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
}

在React中停止屏幕上的自动渲染

1 个答案: