最近一直在将飞飞物联使用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 完全关闭后的回调