基于React的按钮组控件的创建、渲染和交互的方法技术

本发明专利技术公开了一种基于React的按钮组控件的创建、渲染和交互的方法，包括封装，获取，判断和渲染四大步骤，其中渲染步骤包括创建单个按钮组控件，进行横向单个按钮渲染；创建下拉列表式按钮组控件，进行下拉列表式的按钮渲染；将单个按钮组控件和下拉列表式按钮组控件进行拼装组合形成ButtonGroup组件，并将组合后的ButtonGroup组件渲染到页面上。本发明专利技术具有如下有益效果：本发明专利技术创建的按钮组控件能够实现多种按钮表现形式和多种不同交互功能的按钮的组合；提高了用户的交互体验；降低了产品开发阶段的开发难度和复杂度，提高了工作效率，降低了企业成本。

Method of creating, rendering and interacting button group control based on react

【技术实现步骤摘要】
基于React的按钮组控件的创建、渲染和交互的方法
本专利技术涉及WEB
，尤其是涉及一种能够提高用户体验，降低产品开发难度和复杂度，提高工作效率，降低企业成本的基于React的按钮组控件的创建、渲染和交互的方法。
技术介绍
常规的web管理系统大部分功能需求都是涉及某一个列表的增删查改操作的需求；涉及到的页面无非就是列表展示页面，增加和编辑时操作的表单页面；涉及到的功能有按照条件查询记录，新增一条记录，选择某条记录进行编辑，选择某条记录进行删除，勾选某一批记录进行批量删除或者批量更新状态等操作。简言之，这样的增删查改功能模块涉及的操作都是提供一个界面对后端数据库的数据进行操作，而所有这些操作都是基于各种形态的按钮交互触发调用后端接口来实现的。由此可以看出：(1)按钮和按钮交互是每个功能页面不可或缺的组成元素；(2)按钮的展示对页面的整体风格和设计有至关重要的影响；(3)按钮的交互体验就是整个管理系统的交互体验；按钮有着如此不可或缺的作用，且对于整个系统的用户体验又如此关系重大，但是，现阶段我们对于按钮的使用是还是存在不少问题，具体如下：本文档来自技高网...

【技术保护点】
1.一种基于React的按钮组控件的创建、渲染和交互的方法，其特征在于，包括如下步骤：/n(1-1)封装步骤：将页面上的button进行分组，用ButtonGroup组件对分组后button进行封装；/n(1-2)获取步骤：利用React的this.props获取封装后的ButtonGroup组件的关键属性mode参数，showSize属性参数和viewMode属性参数；/n(1-3)判断步骤：提取关键属性mode参数并做出判断，如果mode的值为ButtonGroup时，转入步骤(1-4-1)，判断值为ButtonMenu时，转入步骤(1-4)；/n(1-4)渲染步骤：/n(1-4-1)创建...

【技术特征摘要】
1.一种基于React的按钮组控件的创建、渲染和交互的方法，其特征在于，包括如下步骤：
(1-1)封装步骤：将页面上的button进行分组，用ButtonGroup组件对分组后button进行封装；
(1-2)获取步骤：利用React的this.props获取封装后的ButtonGroup组件的关键属性mode参数，showSize属性参数和viewMode属性参数；
(1-3)判断步骤：提取关键属性mode参数并做出判断，如果mode的值为ButtonGroup时，转入步骤(1-4-1)，判断值为ButtonMenu时，转入步骤(1-4)；
(1-4)渲染步骤：
(1-4-1)创建单个button按钮组控件，进行横向单个button按钮渲染；
(1-4-2)创建下拉列表式button按钮组控件，进行下拉列表式的按钮渲染；
(1-4-3)将单个button按钮组控件和下拉列表式button按钮组控件进行拼装组合形成ButtonGroup组件，并将组合后的ButtonGroup组件渲染到页面上。


2.根据权利要求1所述的基于React的按钮组控件的创建、渲染和交互的方法，其特征在于，步骤(1-3)的具体步骤如下：
(2-1)判断步骤：提取关键属性mode参数并做出判断，如果mode的值为ButtonGroup时，转入步骤(1-4-1)，判断值为ButtonMenu时，转入步骤(2-2)；
(2-2)获取showSize属性参数和所有子button元素数组childrenArray的长度childrenArray.length；
(2-3)将showSize和childrenArray.length进行比较，如果childrenArray.length≤showSize，转入步骤(1-4-1)，如果childrenArray.length＞showSize，截取大于showSize部分的button数组作为入参menuItemArray，转入步骤(1-4-2)。


3.根据权利要求1所述的基于React的按钮组控件的创建、渲染和交互的方法，其特征在于，步骤(1-4-1)的具体步骤如下：
(3-1)通过this.props.children获取所有的button子元素的数组childrenArray
(3-2)循环childrenArray数组，得到单个button按钮元素；
(3-3)设置单...

【专利技术属性】
技术研发人员：郭荣，周环，
申请(专利权)人：杭州美创科技有限公司，
类型：发明
国别省市：浙江;33