https://github.com/ymzuiku/react-event-manager
内聚且高性能的事件管理
https://github.com/ymzuiku/react-event-manager
form react react-event-handlers react-form
Last synced: about 2 months ago
JSON representation
内聚且高性能的事件管理
- Host: GitHub
- URL: https://github.com/ymzuiku/react-event-manager
- Owner: ymzuiku
- Created: 2019-04-25T02:51:28.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2019-06-11T13:11:38.000Z (almost 6 years ago)
- Last Synced: 2025-01-20T17:48:29.703Z (3 months ago)
- Topics: form, react, react-event-handlers, react-form
- Language: JavaScript
- Size: 51.8 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 内聚的事件管理器
使用之前，请先阅读我的一篇文章，如果你的应用不够复杂，你或许不需要此库：
[我们或许不需要 React 的 Form 组件](https://juejin.im/post/5cbda50e6fb9a03212505511)
## 克隆 & 使用
懒得编译发布了, 进入项目
```sh
cd your-project/components
```
拷贝并执行以下命令, 将会只克隆组件代码
```sh
clone-by-ymzuiku(){
git clone --depth=1 https://github.com/ymzuiku/$1.git && rm -rf $1/.git $1/.gitignore
}
clone-by-ymzuiku react-event-manager
```
直接引用
```js
import Manager from 'components/react-event-manager';
```
## API
### Manager API
| key | 类型 | 说明 |
| ----------- | ------------------ | ----------------------------------------------------------------------------- |
| datas | Object | Manager 的数据集合, 具体内容参考 datas API |
| onEvent | Function | 当 Event 的事件触发时, 进行回调 |
| onDidMount | Function | 当 Manager DidMount 时, 进行回调 |
| onUnMount | Function | 当 Manager UnMount 时, 进行回调 |
| group | String | 默认为 'handle', 如果多个Manger嵌套, 希望父集捕获子集时, 可以修改group, 然后在子集注入多个 handle |
### Handle API
我们可以为一个组件注入以下props, Manger会递归子组件, 根据这些props注入相应的
| key | 类型 | 说明 |
| ------------ | ------------- | ------------------------------------------------ |
| handle | String | handle 请确保同一个 Manager 下 所有 handle 是唯一的, Manager 的数据集合 |
| valuekey | String | 该 Event 会触发的值, 默认为 'value' |
| events | String | 该 Event 会触发的值和事件, 默认为 'onChange, onKeyEnter' |
| defvalue | any | 默认设置给 value 的值 |
| SubManager | Boolean | SubManager 标记为 true, 会被注入 SubManager 组件, 用于跨组件捕获事件至父 Manager |
### datas API
| key | 类型 | 说明 |
| --------- | -------------------- | -------------------------------------------------------------- |
| handle | String | 触发事件的 handle 名称 |
| value | Any | onEvent 返回的值, 如果是 DOM 对象返回的是 event.target.value |
| values | {[handle]:value, ...} | 由 handle 名和 value 组合而成的对象 |
| ref | React.element | 当前触发的 React 对象 |
| refs | Array | 所有被 包裹的 React 对象的集合 |
| update | (handleName, nextProps)=>void | 更新某个子组件的函数, 参数会作为 Props 传递给子组件 |
| eventHandle | any | 触发 onEvent 的类型, 如 onChange, onClick |
| eventArgs | Array | 触发 onEvent 的类型的默认参数 |
## 基本使用方式
Manger本身不包含DOM, 所以需要将他放在一个标签内, 如 div 内:
```js
export default ()=> {
return (
)
}
```
接下来的例子, 我们默认 Manager 在一个 div 内
## 捕获事件
Manager 内的组件添加一个 handle 属性, Manager 即可捕获其的事件, 默认捕获 `onChange, onKeyEnter`
```js
// 所有值, ref, update事件, 联动对象, 都在 datas 中
console.log(datas)}>
```
## 触发其他事件
主动触发非常简单, 主动设置 events 类型如: `onMouseEnter, onMouseLeave`
```js
console.log(event, datas)}>
```
在原有的事件上扩展事件, 默认事件为 onChange, onKeyEnter, 在此基础上扩展, 可使用 `...` 符号:
```js
console.log(event, datas)}>
```
## 跨组件捕获
1. 声明一个组件为 SubManager
```js
console.log(event, datas)}>
```
2. 该组件会被注入一个 SubManager 组件, SubManager 将捕获的事件返回到父 Manager
```js
function HeaderBar({SubManager}){
return (
)
}
```
## 联动
```js
// 所有值, ref, update事件, 联动对象, 都在 事件的返回值中
{
// 如果username包含 404, 就更新 password
if (values.username.index('404') >= 0) {
update('password', {
value: '被联动修改了',
style:{{ color:'#f00' }},
})
}
}}>
```
## 根据条件执行事件
```js
// refs 中包含所有 Event 子组件的ref, 根据条件执行事件即可
{
if (value === '...') {
refs.button.save();
}
}}
>
我是标题
```
## 获取 Manager 数据
我们在 onChange 中可以获取 Manager 数据, 亦可直接传递 datas 获取 Manager 数据
```js
const datas = {};
// ManagerDatas 将会存储在 datas 对象中
```
## 捕获键盘
捕获 D 键
```js