如何在 React 中单击按钮时访问另一个组件的方法？

Question

I have a button component that when clicked, should call a method of another component which will increment a value shown to the user. However, when I try to set the button to call that method on click, I always get the error, "Cannot read property of 'incrementState' of undefined'. How can I call this method when the button is clicked?

class IncreaseDiceButton extends React.Component {
      render () {
          return (<button onClick={NumDice.incrementState}>
                      Increase Number Of Dice
                  </button>); 
      }
};

class NumDice extends React.Component
{ 

  constructor(props) {
    super(props);
    this.state = {mystate: 1};
  }    

  incrementState = () =>{
    var myNewState = this.state.mystate +1;
    this.setState({mystate: myNewState});
  };

  decrementState= () =>{
    var myNewState = this.state.mystate -1;
    if(myNewState > 0){
      this.setState({mystate: myNewState});
    }
  }
  render () {
    return ( <h2>
               {this.state.mystate}
             </h2>
           );  
  }
};

Answer 1

What you have in mind is an anti-pattern in React. You should form a hierarchy, mount both components on the same screen, then lifting the state up.

To think about how to redesign, first ask yourself what are the usage for each and every React Component, the behaviour and so on, and try to simplify them as much as possible.

NumDice is a React Component that rendering the latest count, so we can refactor it into below

class NumDice extends React.Component
{
  render () {
    return (
      <h2>
        {this.props.currentDice}
      </h2>
    );  
  }
};

And IncreaseDiceButton component is to increase the Dice right? So we can refactor into below

class IncreaseDiceButton extends React.Component {
  render () {
    return (
      <button onClick={this.props.increaseDice}>
        Increase Number Of Dice
      </button>
    ); 
  }
};

And we need a "parent" component to manage the state, and the function to update the state, so below is an example

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {mystate: 1};
  }

  incrementState = () =>{
    var myNewState = this.state.mystate +1;
    this.setState({mystate: myNewState});
  };

  decrementState= () =>{
    var myNewState = this.state.mystate -1;
    if(myNewState > 0){
      this.setState({mystate: myNewState});
    }
  }

  render() {
    return (
      <>
        <IncreaseDiceButton increaseDice={this.incrementState} />
        <NumDice currentDice={this.state.mystate} />
      </>
    )
  }
}

And to put all puzzles together, below will be the way to construct it

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {mystate: 1};
  }

  incrementState = () =>{
    var myNewState = this.state.mystate +1;
    this.setState({mystate: myNewState});
  };

  decrementState= () =>{
    var myNewState = this.state.mystate -1;
    if(myNewState > 0){
      this.setState({mystate: myNewState});
    }
  }

  render() {
    return (
      <>
        <IncreaseDiceButton increaseDice={this.incrementState} />
        <NumDice currentDice={this.state.mystate} />
      </>
    )
  }
}

class IncreaseDiceButton extends React.Component {
  render () {
    return (
      <button onClick={this.props.increaseDice}>
        Increase Number Of Dice
      </button>
    ); 
  }
};

Please note on the usage on how to pass the function reference by props . If you're serious about React, you do have to master what props and state is. Welcome to React:)

Answer 2

Generally, you're going to want to "lift" state up to a common ancestor. I took your code below and lifted state to a common "App" ancestor.

class IncreaseDiceButton extends React.Component {
  render () {
    return (
      <button onClick={props.incrementState}>
        Increase Number Of Dice
      </button>
    );
  }
};

class NumDice extends React.Component { 
  render() {
    return (
      <h2>
        {props.mystate}
      </h2>
    );  
  }
};

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

  incrementState = () => {
    var myNewState = this.state.mystate +1;
    this.setState({mystate: myNewState});
  };

  decrementState = () => {
    var myNewState = this.state.mystate -1;
    if(myNewState > 0){
      this.setState({mystate: myNewState});
    }
  }

  render() {
    return (
      <NumDice mystate={this.state.mystate} />
      <IncreaseDiceButton incrementState={incrementState} />
    )
  }
}