Question

我有一个按钮组件，单击该组件时应调用另一个组件的方法，该方法将增加显示给用户的值。但是，当我尝试将按钮设置为在单击时调用该方法时，总是会收到错误消息：“无法读取未定义'incrementState'的属性'。单击按钮时如何调用此方法？

select t1.* from 
tableA t1
inner join 
    (select customer_id, max(date_tr) date_tr
    from tableA
    group by customer_id) t2 on t2.customer_id = t1.customer_id
        and t1.date_tr = t2.date_tr

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

Answer 1

您要想到的是React中的反模式。您应该形成一个层次结构，将两个组件安装在同一屏幕上，然后提升状态。

要考虑如何重新设计，首先要问自己每个React组件的用途，行为等等，然后尝试尽可能简化它们。

NumDice是一个React组件，可呈现最新的计数，因此我们可以将其重构为下面的

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

IncreaseDiceButton组件是为了增加骰子吗？因此我们可以将其重构为以下

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

我们需要一个“父”组件来管理状态，并且需要一个用于更新状态的函数，因此下面是一个示例

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

请注意如何使用props传递函数引用的用法。如果您对React很认真，则必须掌握props和state是什么。欢迎使用React：）

Answer 2

通常，您将需要“提升”状态到一个共同的祖先。我将您的代码放在下面，并将状态提升为普通的“ App”祖先。

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

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

2 个答案: