更新祖父母組件的狀態

Question

我想更新祖父母組件的狀態值：

class GrandChild extends React.Component {
  changeNumber() {
    // this.setState(prevState => ({
    //   number: prevState.number + 1 // Add 1
    // }));

    // I want to set the state of the App Component instead of the GrandChild component
  }
  render() {
    return(
      <div>
        <h1>The number is {this.props.number}</h1>
        <button onClick={this.changeNumber}>Increase number by 1</button>
      </div>
    )
  }
}

class Child extends React.Component {
  render() {
    return(
      <div>
        <GrandChild number={this.props.number}/>
      </div>
    )
  }
}

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      number: 1
    }
  }
  render() {
    return (
      <Child number={this.state.number}/>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

我在CodePen中為想要測試代碼的人編寫了此代碼： https ://codepen.io/anon/pen/oEeQdr

我希望對此有一個簡單的解決方案。

提前致謝。

Answer 1

檢查以下工作代碼：

import React from 'react';
import ReactDOM from 'react-dom';

class GrandChild extends React.Component {
  render() {
    return (
      <div>
        <h1>The number is {this.props.number}</h1>
        <button onClick={this.props.incNumber}>Increase number by 1</button>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <div>
        <GrandChild number={this.props.number} incNumber={this.props.incNumber} />
      </div>
    );
  }
}

class App extends React.Component {
  constructor() {
    super();
    this.state = {
      number: 1
    };
  }
  incrementNumber = () => {
    this.setState({ number: this.state.number + 1 });
  };
  render() {
    return (
      <Child number={this.state.number} incNumber={this.incrementNumber} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

Answer 2

class GrandChild extends React.Component {
  changeNumber=()=> {
    this.props.changeNumber();//call parent `changeNumber` method
  }
  render() {
    return(
      <div>
        <h1>The number is {this.props.number}</h1>
        <button onClick={this.changeNumber}>Increase number by 1</button>
      </div>
    )
  }
}

class Child extends React.Component {

  render() {
    return(
      <div>
        <GrandChild number={this.props.number} changeNumber={this.props.changeNumber} /> //passed `changeNumber` as it is to `GrandChild`
      </div>
    )
  }
}

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      number: 1
    }
  }

  changeNumber=()=>{


    this.setState((prevState)=>{
      console.log(prevState);
      return {
        number :  prevState.number + 1
      }
    });
  }
  render() {
    return (
      <Child number={this.state.number} changeNumber = {this.changeNumber}/> //passed `changeNumber` to Child
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

工作codepen

Answer 3

您可以將方法主體作為它的指針發送給Child Class，並作為它的指針，當您在Child中使用該方法時，它將在聲明了的Parent中正確執行。

class GrandChild extends React.Component {
      render() {
        return (
          <div>
            <h1>The number is {this.props.passedProps.number}</h1>
            <button onClick={() => 
this.props.passedProps.increaseNumber()}>Increase number by 1</button>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <div>
        <GrandChild passedProps={this.props}/>
      </div>
    );
  }
}

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      number: 1
    }
  }

  increaseNumber = () => {
    this.setState({ number: this.state.number + 1 });
  }

  render() {
    return (
      <Child number={this.state.number} increaseNumber={this.increaseNumber}/>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));