背景：10月12日进入新公司。我负责PC端。使用的技术：AntDesign、React、dva。分配的项目模块是财务还款。AntDesign中涉及的组件有：Button,Icon,Text,Title,TitleGridGridFormPaginationStepsStepsCheckboxMulti-selectionboxDatePickerDateselectionboxInputinputboxInputNumberNumberinputboxRadioselectorBadgeLogonumberListlistTaglabel,TableformDrawerdrawermessageglobalpromptResultresultSpinLoadingSearchSearchDivider分割线Descriptions描述列表经历了一个月。现已完成开发联调。它已经成功启动。今天正好有时间整理一下遇到的困难和解决办法。开发的第一步是看UI设计图和项目文档，了解客户需求和页面逻辑。开发的第二步是开始绘制静态页面。因为是新项目，所以项目组长会给一个git地址，上面放着一个空的antd架子。直接从git拉下来在这个空架子上开发就行了。如果不知道如何从git中拉取项目，可以看这里的git命令，因为一个项目有多个模块，所以大家每次都在同一个环境下开发。所以使用一个git地址。大家自己写完页面提交合并的代码。这是antdpro的工程目录：常用文件夹简介：config包含路由mock和模拟接口的public图片页面写在src下。三层结构。服务、模型、页面。服务是连接到后端接口的模型，它将获取的接口数据转换为使用的数据。页面就是页面层，绘制页面，调整界面。跳页等操作。util是一个工具。基本上，这些是常用的。之前的公司把模型都写在model层，所有的服务都写在services里面。现在这家公司。我发现它们都在一个文件夹中。编写您自己的模型和服务。像这样：.js文件是写页面和逻辑的地方，页眉引入组件，上面的类引入模型层，导入Form，写你的状态，和方法，在render中写return..less里面是页面样式，就这样，直接写。模型层内部是接口返回的值。注意点是：命名空间。它是您定义的模型层的名称。在effcts中就是你获取到的接口的值。你可以将接口调整成功后的逻辑在这里处理。异步方法的返回值在callback.reducers中。后端接口连接到服务。基本上就是开发了一个页面，文件夹下就是这四个文件。在这里，我遇到的第一个问题就是页面比较复杂。例如，对于一个有步骤条的页面，代码写了1000行。整个页面代码很多，不利于管理。后来向同事请教。我学会了如何划分页面，把一个作为子组件的步骤栏放在一个父组件中。这时候目录就变成了这样：当父组件页面需要显示子组件时，引用子组件。像这样：从'./components/stepsOne'；从'./components/stepsTwo'导入StepsTwo；从'./components/stepsThree'导入StepsThree；从'./components/stepsFour'导入StepsFour；使用时：{steps.map(item=>())}{current==0&&(this.getOneListData(listData)}val={this.state.val}/>)}{current==1&&(this.getTwoListData(listDataTwo,data1)}/>)}{current==2&&(this.stepThreeRef(ref)}aClaimAmounts={aClaimAmounts}getThreeNote={note=>this.getThreeNote(note)}/>)}{current==3&&}{current==4&&(this.newApplication()}>填写新应用,this.goDetails()}>查看详情,]}/>)}可能我写的比较多，看起来不是很流畅，我大概是这样理解的：引入子组件后，使用标签直接在需要用到的地方这样就可以拿到子组件的内容了，至于我的datalist={datalist}，意思是给子组件传值，{datalist}里的datalist就是我解析出来的值fromthedatalistinstateinparentcomponent..getTwoListData={(listDataTwo,data1)=>this.getTwoListData(listDataTwo,data1)}表示子组件传值给父组件onRef={ref=>this.stepThreeRef(ref)}表示父组件可以获取子组件中所有的值，包括state，使用onRef方法时，需要在子组件中的componentDidMount方法中定义：this.props.onRef(这个);然后就可以在父组件Arrive中获取了。父组件取值：我在父组件的state里定义了一个变量，用来存放第三步bar的所有值。stepThreeRef=ref=>{this.setState({threeRef:ref});};这很复杂。我在一周内完成了静态页面的编写。我在调试界面的时候，这几个步骤加上上传赋值，占了我联调一半的时间，哈哈哈哈。妹子们，逻辑差了一点点~会很难看懂~写起来会很慢~我也查了N个百度，问了同事好几次才解决了这些问题。以后我会写更多应该很容易写。其他组件比较简单，引入后直接使用即可。但是stepbar和drawer里面是有逻辑的，之前没有用过这两个组件。所以这个项目写起来还是用了一段时间。比如我这次写了项目中用到的步骤逻辑（记录一下，哈哈哈哈）：首页有一个单选列表。使用的组件有Table，Tag，Search，当Radio单选按钮点击下一步进入第二页时，需要将单选后的列表内容全部传过去。并且此无线电选择是强制性的。如果不选择，则需要使用消息全局提示框。第二页分为两部分，显示公司名称、付款收据和发票。使用的组件是：点击支付明细打开一个抽屉，里面有支付回执信息：点击上一步返回第一步页面，第一页之前选中的数据要保持选中状态。点击取消返回第一步页面，但需要取消选中状态。点击下一步进入第三步页面。两页上的单选付款收据和多选发票带过来。这两个必须要判断，必须两个都选中，否则弹出框会停留在当前页面。像这样：两个都选好后，点击Next一步就可以进入第三个页面了。第三页是从第二页发来的收据和发票，每张发票下都有很多行项目。截图是一张，后续还会有很多张。所以这里需要遍历发票的显示列表。并且可以输入每个行项目以匹配金额。右下角的配额是动态增减的。嗯，这里遇到了我的第二个问题：在页面底部如何动态加减本次匹配金额的金额。有一种方法可以获取输入框的数量。e.目标值。相信大家都知道。但是页面上可能有N个输入框。这是不确定的。后来想到把这个输入框放在Form下面。可能我写的比较复杂。但这就是我当时的想法。后来同事给我推荐了一个Form表单的方法，就叫这个！!!this.props.form.getFieldsValue();小偷很容易使用。我一次性获取了页面上输入框的所有内容。而我也踩坑了。开始绑定onChange方法，后来发现有点bug。因为输入框的值发生变化时会触发onChange方法。如果用户点击了输入框，没有改变，但是你的总值加减了，就会有问题。后面会用到onBlur方法。失焦触发时间。这样可以避免用户在没有做任何操作的情况下点击输入框，不会影响最终的值。因为我把方法里面的值都加进去了~好吧~我觉得有点有点笨，但是没想到好办法。我刚用过这个。最终的结果是，匹配的数量是根据输入框的值动态加减的。还是实现了，哈哈哈哈。点击上一步返回第二页，第二页要选择来到第三页时选择的值。第三页用到的组件也介绍一下：有很多判断逻辑，比如输入框的值不能大于未匹配的，本次匹配的总金额不能大于未匹配的金额。否则弹出框，所有条件都满足后，点击下一步，成功进入第四页。这个页面和第三页的区别在于输入框变成了显示，备注也变成了Read-only。点击上一步返回第三页。第三页的输入框应该显示之前输入的数字，备注也是一样的。在第四页点击提交，进入第五页。这里点击提交的时候，是不需要逻辑判断的，但是需要发送接口。将所有参数传递给后端。如果接口返回错误，该页面将保留。这是我的模块中最复杂的页面。其他四个页面都是一些不难显示的数据，搜索，抽屉详情，跳转抽屉等，先说一下跳转页面的方法：goDetails=()=>{const{id}=this.staterouter.push({pathname:'/receivableManagement/receivableDetails',query:{id,},});};pathname是页面的路径，查询包含参数。跳转后带参数到页面。获取参数就是使用query获取//ReceiptslipcontentgetListCompletedMatch=()=>{const{location:{query},}=this.props;this.setState({loading:true});this.props.dispatch({type:'receivableDetailsModel/getListCompletedMatch',data:{paymentId:query.id},callback:data=>{this.setState({loading:false});}});};还还有一些小坑，就不一一说了。本模块收获最大的就是动态获取输入框加减后的值，以及步长栏父组件和子组件的值。还有抽屉，多个抽屉跳转。简单的方法是：给amount后保留两位小数。Number(amount).toFixed(2);这个toFixed()方法必须是Number类型的值，小数点保留在括号里。输入框失焦时触发的onBlur方法。您可以获得最后一个值。获取Form表单下的所有输入框值：this.props.form.getFieldsValue()放几个写好的页面~
