{"id":21045530,"url":"https://github.com/ymzuiku/react-event-manager","last_synced_at":"2026-04-27T19:32:45.760Z","repository":{"id":151579123,"uuid":"183344488","full_name":"ymzuiku/react-event-manager","owner":"ymzuiku","description":"内聚且高性能的事件管理","archived":false,"fork":false,"pushed_at":"2019-06-11T13:11:38.000Z","size":53,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-12-28T08:19:25.554Z","etag":null,"topics":["form","react","react-event-handlers","react-form"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ymzuiku.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-04-25T02:51:28.000Z","updated_at":"2019-06-11T13:19:00.000Z","dependencies_parsed_at":"2023-04-14T14:34:33.260Z","dependency_job_id":null,"html_url":"https://github.com/ymzuiku/react-event-manager","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ymzuiku/react-event-manager","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Freact-event-manager","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Freact-event-manager/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Freact-event-manager/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Freact-event-manager/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ymzuiku","download_url":"https://codeload.github.com/ymzuiku/react-event-manager/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ymzuiku%2Freact-event-manager/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32352396,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-27T17:12:42.749Z","status":"ssl_error","status_checked_at":"2026-04-27T17:12:41.658Z","response_time":128,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["form","react","react-event-handlers","react-form"],"created_at":"2024-11-19T14:23:00.015Z","updated_at":"2026-04-27T19:32:45.741Z","avatar_url":"https://github.com/ymzuiku.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# 内聚的事件管理器\n\n使用之前，请先阅读我的一篇文章，如果你的应用不够复杂，你或许不需要此库：\n\n[我们或许不需要 React 的 Form 组件](https://juejin.im/post/5cbda50e6fb9a03212505511)\n\n## 克隆 \u0026 使用\n\n懒得编译发布了, 进入项目\n\n```sh\ncd your-project/components\n```\n\n拷贝并执行以下命令, 将会只克隆组件代码\n\n```sh\nclone-by-ymzuiku(){\n  git clone --depth=1 https://github.com/ymzuiku/$1.git \u0026\u0026 rm -rf $1/.git $1/.gitignore\n}\nclone-by-ymzuiku react-event-manager\n```\n\n直接引用\n\n```js\nimport Manager from 'components/react-event-manager';\n```\n\n## API\n\n### Manager API\n\n| key         | 类型               | 说明                                                                          |\n| ----------- | ------------------ | ----------------------------------------------------------------------------- |\n| datas       | Object             | Manager 的数据集合, 具体内容参考 datas API                                    |\n| onEvent     | Function           | 当 Event 的事件触发时, 进行回调                                               |\n| onDidMount  | Function           | 当 Manager DidMount 时, 进行回调                                              |\n| onUnMount   | Function           | 当 Manager UnMount 时, 进行回调                                               |\n| group | String | 默认为 'handle', 如果多个Manger嵌套, 希望父集捕获子集时, 可以修改group, 然后在子集注入多个 handle |\n\n### Handle API\n\n我们可以为一个组件注入以下props, Manger会递归子组件, 根据这些props注入相应的\n\n| key          | 类型          | 说明                                                                                                         |\n| ------------ | ------------- | ------------------------------------------------ |\n| handle         | String        | handle 请确保同一个 Manager 下 所有 handle 是唯一的, Manager 的数据集合                                      |\n| valuekey         | String | 该 Event 会触发的值, 默认为 'value' |\n| events         | String | 该 Event 会触发的值和事件, 默认为 'onChange, onKeyEnter' |\n| defvalue | any           | 默认设置给 value 的值                                                                                        |\n| SubManager | Boolean | SubManager 标记为 true, 会被注入 SubManager 组件, 用于跨组件捕获事件至父 Manager |\n\n### datas API\n\n| key       | 类型                 | 说明                                                           |\n| --------- | -------------------- | -------------------------------------------------------------- |\n| handle      | String               | 触发事件的 handle 名称                                          |\n| value     | Any                  | onEvent 返回的值, 如果是 DOM 对象返回的是 event.target.value   |\n| values    | {[handle]:value, ...}  | 由 handle 名和 value 组合而成的对象                                |\n| ref       | React.element        | 当前触发的 React 对象                                          |\n| refs      | Array\u003cReact.element\u003e | 所有被 \u003cEvent /\u003e 包裹的 React 对象的集合                       |\n| update   |   (handleName, nextProps)=\u003evoid     | 更新某个子组件的函数, 参数会作为 Props 传递给子组件 |\n| eventHandle | any                  | 触发 onEvent 的类型, 如 onChange, onClick                      |\n| eventArgs | Array\u003cany\u003e           | 触发 onEvent 的类型的默认参数                                  |\n\n## 基本使用方式\n\nManger本身不包含DOM, 所以需要将他放在一个标签内, 如 div 内:\n\n```js\nexport default ()=\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cManager\u003e\n        \u003cinput /\u003e\n        \u003cbutton /\u003e\n      \u003c/Manager\u003e\n    \u003cdiv\u003e\n  )\n}\n```\n\n接下来的例子, 我们默认 Manager 在一个 div 内\n\n## 捕获事件\n\nManager 内的组件添加一个 handle 属性, Manager 即可捕获其的事件, 默认捕获 `onChange, onKeyEnter`\n\n```js\n// 所有值, ref, update事件, 联动对象, 都在 datas 中\n\u003cManager onEvent={datas =\u003e console.log(datas)}\u003e\n  \u003cinput defvalue=\"hello\" handle=\"username /\u003e\n  \u003cdiv\u003e\n    \u003cdiv\u003e多层级内的 handle 一样可以捕获\u003c/div\u003e\n    \u003cinput handle=\"password\" /\u003e\n  \u003c/div\u003e\n\u003c/Manager\u003e\n```\n\n## 触发其他事件\n\n主动触发非常简单, 主动设置 events 类型如: `onMouseEnter, onMouseLeave`\n\n```js\n\u003cManager onEvent={(event, datas) =\u003e console.log(event, datas)}\u003e\n  \u003cinput defvalue=\"hello\" handle=\"username /\u003e\n  \u003cinput handle=\"password\" /\u003e\n  \u003cbutton events=\"onMouseEnter, onMouseLeave\" handle=\"theButton\" /\u003e\n\u003c/Manager\u003e\n```\n\n在原有的事件上扩展事件, 默认事件为 onChange, onKeyEnter, 在此基础上扩展, 可使用 `...` 符号:\n\n```js\n\u003cManager onEvent={(event, datas) =\u003e console.log(event, datas)}\u003e\n  \u003cinput defvalue=\"hello\" handle=\"username /\u003e\n  \u003cinput handle=\"password\" /\u003e\n  \u003cbutton events=\"..., onMouseLeave\" handle=\"theButton\" /\u003e\n\u003c/Manager\u003e\n```\n\n## 跨组件捕获\n\n1. 声明一个组件为 SubManager\n\n```js\n\u003cManager onEvent={(event, datas) =\u003e console.log(event, datas)}\u003e\n  \u003cHeaderBar SubManager\u003e\u003c/HeaderBar\u003e\n\u003c/Manager\u003e\n```\n\n2. 该组件会被注入一个 SubManager 组件, SubManager 将捕获的事件返回到父 Manager\n\n```js\nfunction HeaderBar({SubManager}){\n  return (\n    \u003cSubManager\u003e\n      \u003cdiv\u003e\n        \u003cinput handle=\"search\" /\u003e\n      \u003c/div\u003e\n    \u003c/SubManager\u003e\n  )\n}\n```\n\n\n## 联动\n\n```js\n// 所有值, ref, update事件, 联动对象, 都在 事件的返回值中\n\u003cManager onEvent={({values, update, name})=\u003e {\n  // 如果username包含 404, 就更新 password\n  if (values.username.index('404') \u003e= 0) {\n    update('password', {\n      value: '被联动修改了',\n      style:{{ color:'#f00' }},\n    })\n  }\n}}\u003e\n  \u003cinput defvalue=\"hello\" handle=\"username /\u003e\n  \u003cinput handle=\"password\" /\u003e\n\u003c/Manager\u003e\n```\n\n## 根据条件执行事件\n\n```js\n// refs 中包含所有 Event 子组件的ref, 根据条件执行事件即可\n\u003cManager\n  onEvent={({ value, refs }) =\u003e {\n    if (value === '...') {\n      refs.button.save();\n    }\n  }}\n\u003e\n  \u003cdiv\u003e我是标题\u003c/div\u003e\n  \u003cButton handle=\"button\" /\u003e\n\u003c/Manager\u003e\n```\n\n## 获取 Manager 数据\n\n我们在 onChange 中可以获取 Manager 数据, 亦可直接传递 datas 获取 Manager 数据\n\n```js\nconst datas = {};\n\n// ManagerDatas 将会存储在 datas 对象中\n\u003cManager datas={datas}\u003e\n  \u003cinput defvalue=\"hello\" handle=\"username /\u003e\n\u003c/Manager\u003e;\n```\n\n## 异步设定初始值\n\n```js\n\u003cManager onDidMount={({ update })=\u003e {\n  // 异步请求, 根据返回内容更新界面\n  fetch(....).then(res=\u003eres.json()).then(data=\u003e{\n    update('username', {value: data.username})\n  })\n}}\u003e\n  \u003cinput handle=\"username /\u003e\n\u003c/Manager\u003e\n```\n\n\n## 捕获键盘\n\n捕获 D 键\n\n```js\n\u003cManager onEvent={...}\u003e\n  \u003cinput events=\"..., onKeyD\" handle=\"username /\u003e\n\u003c/Manager\u003e\n```\n\n捕获组合键: ctrl + shift + d:\n\n```js\n\u003cManager onEvent={...}\u003e\n  \u003cinput events=\"..., onKeyD_ctrl_shift\" handle=\"username /\u003e\n\u003c/Manager\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fymzuiku%2Freact-event-manager","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fymzuiku%2Freact-event-manager","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fymzuiku%2Freact-event-manager/lists"}