javascript - 控制条件警报，并在 ReactJS 中滚动到它

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 是异步的。

因此，当您第二次单击该按钮时，它会正确滚动。

我曾尝试使用回调来设置状态，但没有成功

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 中使用了回调参数，所以我确定在触发函数之前状态设置正确。