Question

我有一个React项目，当属性isSelectedNumber将其状态更改为true时，将呈现一个组件SubmitButton。当您使用onClick函数单击按钮时，组件SubmitButton（可以单击的按钮）将调用一个方法，这将导致属性isSubmitClicked更改为true，组件NextButton将呈现该按钮。

问题在于，仅呈现SubmitButton，而当我单击组件SubmitButton的按钮时，它不呈现组件NextButton。

这是包装器组件的一部分，如果条件成立，将同时渲染两个组件。

{this.state.isSelectedNumber ?  <SubmitButton  handleClickSumbmit={this.handleClickSumbmit}/>  : null}
 {this.state.isSubmitClicked ?   <NextButton /> : null}

这是SubmitButton组件的一部分，其中onClick函数应调用handleCliclkSubmit方法来更改属性状态：

 <button type="button" onClick={this.props.handleClickSubmit}></button>

这是handleClickSubmit方法：

    handleClickSumbmit () {
      this.setState({
        isSubmitClicked: true
      });
  }

我想知道您是否知道会发生什么以及如何解决。

Answer 1

您有错字错误

更改

  <button type="button" onClick={this.props.handleClickSubmit}></button>

收件人

   <button type="button" onClick={this.props.handleClickSumbmit}></button>

函数名称在代码中也没有意义。将handleClickSumbmit更改为handleClickSubmit，只要您有handleClickSumbmit即可。

此外，由于您使用的是常规函数，因此必须将其绑定到构造函数中。我希望你已经做到了。

Answer 2

我认为您应该检查handleClickSubmit的调用，将其称为handleClickSumbmit，也许就是问题所在。

onClick函数未调用方法

2 个答案: