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

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

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

class IncreaseDiceButton扩展React.Component{
渲染（）{
返回(
增加骰子的数量
); 
}
};

类NumDice扩展React.Component
{ 
建造师（道具）{
超级（道具）；
this.state={mystate:1}；
}    
递增状态=（）=>{
var myNewState=this.state.mystate+1；
this.setState（{mystate:myNewState}）；
};
递减状态=（）=>{
var myNewState=this.state.mystate-1；
如果（myNewState>0）{
this.setState（{mystate:myNewState}）；
}
}
渲染（）{
报税表（
{this.state.mystate}
);  
}
};

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

为了思考如何重新设计，首先问问自己每个React组件的用途、行为等，并尽可能简化它们

NumDice

是一个React组件，用于呈现最新计数，因此我们可以将其重构为以下内容

类NumDice扩展React.Component
{
渲染（）{
返回(
{this.props.currentDice}
);  
}
};

而

IncreaseDiceButton

组件是增加骰子的，对吗？所以我们可以重构成下面的

class IncreaseDiceButton扩展React.Component{
渲染（）{
返回(
增加骰子的数量
); 
}
};

我们需要一个“父”组件来管理状态，以及更新状态的函数，下面是一个示例

类ParentComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.state={mystate:1}； } 递增状态=（）=>{ var myNewState=this.state.mystate+1； this.setState（{mystate:myNewState}）； }; 递减状态=（）=>{ var myNewState=this.state.mystate-1； 如果（myNewState>0）{ this.setState（{mystate:myNewState}）； } } render（）{ 返回( ) } } 为了把所有的谜题放在一起，下面是构建它的方法

类ParentComponent扩展了React.Component{ 建造师（道具）{ 超级（道具）； this.state={mystate:1}； } 递增状态=（）=>{ var myNewState=this.state.mystate+1； this.setState（{mystate:myNewState}）； }; 递减状态=（）=>{ var myNewState=this.state.mystate-1； 如果（myNewState>0）{ this.setState（{mystate:myNewState}）； } } render（）{ 返回( ) } } 类IncreaseDiceButton扩展React.Component{ 渲染（）{ 返回( 增加骰子的数量 ); } };

---

请注意如何通过

props

传递函数引用的用法。如果你认真对待React，你必须掌握

props

和

state

是什么。欢迎使用React:）

通常，你会希望将状态“提升”到一个共同的祖先。我将你的代码放在下面，并将状态提升到一个共同的“应用程序”“祖先

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

class IncreaseDiceButton扩展React.Component{
渲染（）{
返回(
增加骰子的数量
);
}
};

类NumDice扩展React.Component{
render（）{
返回(
{props.mystate}
);  
}
};

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
this.state={mystate:1}；
}
递增状态=（）=>{
var myNewState=this.state.mystate+1；
this.setState（{mystate:myNewState}）；
};
递减状态=（）=>{
var myNewState=this.state.mystate-1；
如果（myNewState>0）{
this.setState（{mystate:myNewState}）；
}
}
render（）{
返回(
)
}
}

您可能实际上需要将

incementDice

功能作为道具传递到组件层次结构中。您能否更新显示这两个组件如何连接的示例代码？因此，您当前的方法在React中有点反模式。组件不应该直接调用其他组件中的函数，这意味着存在层次结构。解决这类问题的一个标准方法是将状态及其递增/递减功能提升到一个公共父级，然后通过道具将状态/函数传递给相关组件。@Nick我想我没有真正的层次结构，这就像它们一样相互关联。这是我学习react的第一天，所以我仍然能感觉到一切是如何运作的。啊，我明白了，所以要把它全部呈现出来，我只需要像“ReactDOM.render（，document.querySelector（“#numDice”）；”这样的东西编辑：这仍然会产生“incrementState未定义”错误，如果您试图将react应用程序放入

numDice

DOM元素中，这可能会起作用！

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