最近一直在将飞飞物联使用React重构，后端用ThinkPHP和easySwoole重写，重构的原因有几个：
- 可维护性差：随着项目越来越大，可维护性越来越差，原项目偏向于原生js,html,css编写，编写混乱，急需一套成熟的前端开发框架来进行开发，以支撑日后的升级维护；
- 美观度低：用户交互不统一，界面风格各异，由于Layui提供的组件比较少，多了一些不必要的步骤，很多情况下是以牺牲用户体验为代价进行的开发；
- 没有API文档，编码混乱：没有写API文档，接口、路由混乱，很多方法或接口重复、相似或废弃，很多方法可以继承又写了独立的方法，数据校验前后端也不统一等等；
- 为日后做准备：为日后移动端APP、PC客户端以及跨平台小程序打基础，一套方案解决全部的前端，而不是在各个不同的前端之间耗费大量精力；
本次重构的宗旨：
- 完美不在于无以复加，而在于无可删减
- 不追求速度，追求极致简洁！完美！的代码
- 多花时间想想能不能写得更好，哪些地方要修改，经常review自己的代码
这里使用的是ant design pro的modal
一个简单弹出层的实现思路
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
import { Modal, Button } from 'antd'; class App extends React.Component { state = { visible: false } showModal = () => { this.setState({ visible: true, }); } handleOk = (e) => { console.log(e); this.setState({ visible: false, }); } handleCancel = (e) => { console.log(e); this.setState({ visible: false, }); } render() { return ( <div> <Button type="primary" onClick={this.showModal}> Open Modal </Button> <Modal title="Basic Modal" visible={this.state.visible} onOk={this.handleOk} onCancel={this.handleCancel} > <p>Some contents...</p> <p>Some contents...</p> <p>Some contents...</p> </Modal> </div> ); } } ReactDOM.render(<App />, mountNode); |
知识点：
1.使用了antd的<modal>标签来实现，这个标签中传入了四个方法
- title 弹出层标题
- visible:弹出层的可见性，是一个state的值来控制
- onOk：点击确定的回调
- onCancel：点击取消的回调
- footer：其实还有一个footer的参数，这个参数可以能够自定义页脚
- centered：还可以直接传一个centered，会默认在页面中间弹出来
|
1 2 3 4 5 6 |
footer={[ <Button key="back" onClick={this.handleCancel}>Return</Button>, <Button key="submit" type="primary" loading={loading} onClick={this.handleOk}> Submit </Button>, ]} |
2. <modal>对话框中的内容</modal>
3. 点击提交显示loading可以在onOk的回调中实现，使用loading的值来控制按钮的状态
|
1 2 3 4 5 6 |
handleOk = () => { this.setState({ loading: true }); (() => { this.setState({ loading: false, visible: false }); }, 3000); } |
4. 通过点击一个按钮，来触发一个改变state中的visible从而控制模型的出现和消失
多步骤表单
创建表单
|
1 2 3 4 5 6 7 8 |
<CreateForm {...parentMethods} modalVisible={modalVisible} /> {configFormValues && Object.keys(configFormValues).length ? ( <ConfigForm {...updateMethods} updateModalVisible={updateConfigModalVisible} values={configFormValues} /> ) : null} |
步骤条
|
1 2 3 4 5 6 7 8 9 10 11 12 |
import { Steps } from 'antd'; const Step = Steps.Step; ReactDOM.render( <Steps current={1}> <Step title="Finished" description="This is a description." /> <Step title="In Progress" description="This is a description." /> <Step title="Waiting" description="This is a description." /> </Steps>, mountNode ); |
- 通过控制current也就是下面的currentStep来控制步骤条的位置
- 与表单结合，通过currentStep渲染不同的表单内容在弹出层上即可
创建弹出层
|
1 2 3 4 5 6 7 8 9 10 |
<Modal width={640} bodyStyle={{ padding: '32px 40px 48px' }} destroyOnClose title="配置传感设备" visible={updateModalVisible} footer={this.renderFooter(currentStep)} onCancel={() => handleUpdateConfigModalVisible(false, values)} afterClose={() => handleUpdateConfigModalVisible()} > |
- width：弹出层的宽度
- bodyStyle：Modal Body的样式
- destroyOnClose，关闭时销毁 Modal 里的子元素
- title 标题
- visible 控制可见性，传入的是一个布尔值
- fotter 自定义页脚，在页脚中通过控制currentStep来指定表单到哪一步
- onCancel 点击取消触发的事件（至少要修改可见性）
- afterClose Modal 完全关闭后的回调
