Question

我有一条条件警报消息，我想根据用户的状态显示该消息，该消息确定用户是否可以提交消息

{this.state.showAlert &&
<div class="alert alert-dismissible alert-warning">
  <button type="button" onClick={()=> this.setState({showAlert: false})} class="close" data-dismiss="alert">&times;</button>
  <h4 class="alert-heading">Warning!</h4>
  <p class="mb-0">Please fill in all the requested fields, before submitting a message.  <a class="alert-link">I will look at answer your message as quickly as possible. Thank you</a>.</p>
</div>
}

<div class="progress">
  <div class="progress-bar" role="progressbar" style={{width: '100%'}} aria-valuenow="100" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div ref={el => { this.el = el; }} />
</div>

在这里，我渲染消息并制作一个Jsx元素向底部滚动

在我的处理程序中，我有条件检查

onSubmitHandler = () =>{
    if(this.state.isUsernameCorrect == false || this.state.isEmailCorrect == false){
        this.setState({
        showAlert: true
      })
       this.scrollToBottom('hello')

    }else{
      this.setState({
        showAlert: false
      })
    }
    console.log('submitted')
  }

我的问题是第一次未正确设置警报。我认为这是由于setState是异步的。

因此第二次单击该按钮，它将正确滚动。

我尝试过使用setState的回调，但是没有运气

onSubmitHandler = () =>{
    if(this.state.isUsernameCorrect == false || this.state.isEmailCorrect == false){
        this.setState({
        showAlert: true
      },  this.scrollToBottom('hello'))

Answer 1

我发现问题是，我没有正确执行该函数，因此仅在首次调用提交处理程序时才调用该函数。

当然，这应该使用函数调用来完成。

onSubmitHandler = () =>{
if(this.state.isUsernameCorrect == false || this.state.isEmailCorrect == false){
    this.setState({
    showAlert: true
  }, () =>  
  this.scrollToBottom('hello'))

}else{
  this.setState({
    showAlert: false
  })
}
console.log('submitted')

}

我在setState中使用了回调参数，因此在启动函数之前，我确定状态已正确设置。

控制条件警报，并在ReactJS中向其滚动

1 个答案: