reactjs - 我正在尝试根据子组件中的数据呈现从子组件更改父组件的状态

Question

我正在尝试根据通过子组件传入的数据来更改父组件的状态。我不知道如何在没有按钮的情况下更改父母。子元素上的 this.state.rows 来自数据库，我想更改状态，以便在数据加载时显示旋转图标。

class Parent extends Component{
  constructor(props){
    super();
    this.state={
      spinner=false
    }
    this.spinnerUpdate = this.spinnerUpdate.bind(this)
  }

  spinnerUpdate(){}

  render(){
    return(
      <Child spinner={this.spinnerUpdate}/>
    )
  }
}


class Child extends Component{
  constructor(props){
    super(props);
    this.state={
      rows: rows,
    }
    this.spinner = this.spinner.bind(this)
  }

  spinner(){
    if(this.state.rows){
      this.setState({spinner: true})
    }
  }

  render(){
    return(
      <div>
        //random info
      </div>
    )
  }
}

我希望子组件中的微调器函数在数据被渲染时改变父状态的状态。

Answer 1

子组件将接收spinner从父组件传递的道具。

    class Parent extends Component{
        constructor(props){
         ...
          this.spinnerUpdate = this.spinnerUpdate.bind(this)
        }

      //will receive one param from Child component to hide/show spinner.
        spinnerUpdate(spinnerStatus){
            this.setState({spinner: spinnerStatus})
        }

        render(){
          return(
            <Child spinner={this.spinnerUpdate}/>
          )
        }
      }


      class Child extends Component{
        constructor(props){
          ...
        }

        spinner(){

   //call spinner of parent based on matched criteria
          if(this.state.rows){
            this.props.spinner(true);
          }else{
            this.props.spinner(false);
          }
        }

        render(){
          return(
            <div>
              //random info
            </div>
          )
        }
      }