我正在尝试根据 child 中的数据呈现从 child 组件更改 parent 组件的状态

Question

我正在尝试根据通过 child 组件传入的数据更改 parent 组件的状态。我不知道如何在没有按钮的情况下更改 parent。 child 元素上的 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>
    )
  }
}

我希望 child 组件中的微调器函数在呈现数据时更改 parent 状态的状态。

Answer 1

子组件将从父组件传递的 props 中接收 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>
          )
        }
      }

我正在尝试根据 child 中的数据呈现从 child 组件更改 parent 组件的状态

I'm trying to change state on a parent component from a child component based on data rendering in the child

reactjs

react-props