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>
          )
        }
      }

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

1 个答案: