javascript - react中异步验证表单应该如何写？

问题描述

问 题

场景如下:
有一个input，用户可以输入url地址，然后需要通过请求这个url地址通过返回的状态码是否为200才能走下一步。

stepOne.jsx

stepController.jsx

可是问题是除了这一步验证url之外，其他的所有判断是否合法都是同步判断.所以就直接在checkData无误后把值返回到stepController了。可是我岂不是为了这一个异步判断要把stepController里的所有return都放在then或者catch里？
大家有什么优雅一点的方法嘛？

目录结构

解决方案

不要去管同步还是异步，每一步校验完成后的状态都调用setState保存，校验的结果通过state体现，而不要根据checkCurrentStep的返回值是true还是false

创建一个容器组件Container，负责校验逻辑，stepController里的逻辑也写在这里。每一个步骤的页面对应一个组件Step1、Step2、Step3...当需要校验页面数据时，页面组件通过props调用Container的stepController方法，stepController完成校验后setState，state类似这样的结构：{page1: {data: XXX, validate: true}, page2:{data: XXX, validate: true}}，把state传递给各个页面组件，在页面组件的componentWillReceiveProps()中判断props的变化，当nextProps.validate为true时，表示验证通过，在这个方法中执行跳转到下个页面的逻辑。

这篇关于javascript - react中异步验证表单应该如何写？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！