首页 > 解决方案 > 我可以保证在表单提交之前状态已经改变吗?

问题描述

根据用户是“批准”还是“拒绝”,需要不同的提交回调。因此,我根据用户单击的内容将状态变量“submitCallBack”设置为相关函数。我的问题是,我可以保证在提交完成之前设置 submitCallBack 或重新渲染吗?(因为 setState 是异步的)

这目前正在按“预期”工作,但想确保我在发布时不会遇到问题

我想要发生的事件顺序:

  1. 用户点击按钮
  2. this.handleSubmit() 通过回调调用
  3. submitCallBack 已设置并且表单重新呈现
  4. 提交事件发生并且使用正确的回调设置了 handleSubmit
class FormClass extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      submitCallBack: () => {}
    }
  }

  handleSubmit = callback => () => {
    // this needs to be set before the submit completes and the forms callback function 
    // for onSubmit must be set to this new value
    this.setState({ submitCallBack: callback })
  }

   render() {
    const { error, invalid, submitting, handleSubmit, approve, decline } = this.props
    return (
      <form onSubmit={handleSubmit(this.state.submitCallBack)}>
          <Button
            type="submit"
            onClick={this.handleSubmit(approve)}
            primary
            action
            loading={submitting}
          >
            Approve
          </Button>
          <Button type="submit" onClick={this.handleSubmit(decline)}>
            Reject
          </Button>
        </div>
      </form>
    )
  }
}

标签: reactjsredux-form

解决方案


推荐阅读