{"id":21195627,"url":"https://github.com/qiqiboy/react-md-formutil","last_synced_at":"2026-05-01T08:32:45.826Z","repository":{"id":57334488,"uuid":"147078229","full_name":"qiqiboy/react-md-formutil","owner":"qiqiboy","description":"Happy to use react-formutil in the project based on react-md ^_^","archived":false,"fork":false,"pushed_at":"2018-09-03T10:16:38.000Z","size":483,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2026-04-03T03:23:52.362Z","etag":null,"topics":["material-ui","react","react-component","react-form","react-formutil","react-md"],"latest_commit_sha":null,"homepage":"http://github.boy.im/react-md-formutil/demo/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/qiqiboy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-09-02T11:14:37.000Z","updated_at":"2018-09-03T10:16:41.000Z","dependencies_parsed_at":"2022-09-05T08:01:45.404Z","dependency_job_id":null,"html_url":"https://github.com/qiqiboy/react-md-formutil","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/qiqiboy/react-md-formutil","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Freact-md-formutil","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Freact-md-formutil/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Freact-md-formutil/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Freact-md-formutil/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qiqiboy","download_url":"https://codeload.github.com/qiqiboy/react-md-formutil/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Freact-md-formutil/sbom","scorecard":{"id":753721,"data":{"date":"2025-08-11","repo":{"name":"github.com/qiqiboy/react-md-formutil","commit":"a48dbc87b883f3a484b4f07c0898d2330e6317ee"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":3,"checks":[{"name":"Code-Review","score":0,"reason":"Found 0/7 approved changesets -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project requires human code review before pull requests (aka merge requests) are merged.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#code-review"}},{"name":"Packaging","score":-1,"reason":"packaging workflow not detected","details":["Warn: no GitHub/GitLab publishing workflow detected."],"documentation":{"short":"Determines if the project is published as a package that others can easily download, install, easily update, and uninstall.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#packaging"}},{"name":"Dangerous-Workflow","score":-1,"reason":"no workflows found","details":null,"documentation":{"short":"Determines if the project's GitHub Action workflows avoid dangerous patterns.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#dangerous-workflow"}},{"name":"Binary-Artifacts","score":10,"reason":"no binaries found in the repo","details":null,"documentation":{"short":"Determines if the project has generated executable (binary) artifacts in the source repository.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#binary-artifacts"}},{"name":"Maintained","score":0,"reason":"0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0","details":null,"documentation":{"short":"Determines if the project is \"actively maintained\".","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#maintained"}},{"name":"Token-Permissions","score":-1,"reason":"No tokens found","details":null,"documentation":{"short":"Determines if the project's workflows follow the principle of least privilege.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#token-permissions"}},{"name":"SAST","score":0,"reason":"no SAST tool detected","details":["Warn: no pull requests merged into dev branch"],"documentation":{"short":"Determines if the project uses static code analysis.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#sast"}},{"name":"Pinned-Dependencies","score":-1,"reason":"no dependencies found","details":null,"documentation":{"short":"Determines if the project has declared and pinned the dependencies of its build process.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#pinned-dependencies"}},{"name":"CII-Best-Practices","score":0,"reason":"no effort to earn an OpenSSF best practices badge detected","details":null,"documentation":{"short":"Determines if the project has an OpenSSF (formerly CII) Best Practices Badge.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#cii-best-practices"}},{"name":"Vulnerabilities","score":10,"reason":"0 existing vulnerabilities detected","details":null,"documentation":{"short":"Determines if the project has open, known unfixed vulnerabilities.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#vulnerabilities"}},{"name":"Security-Policy","score":0,"reason":"security policy file not detected","details":["Warn: no security policy file detected","Warn: no security file to analyze","Warn: no security file to analyze","Warn: no security file to analyze"],"documentation":{"short":"Determines if the project has published a security policy.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#security-policy"}},{"name":"Signed-Releases","score":-1,"reason":"no releases found","details":null,"documentation":{"short":"Determines if the project cryptographically signs release artifacts.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#signed-releases"}},{"name":"License","score":10,"reason":"license file detected","details":["Info: project has a license file: LICENSE:0","Info: FSF or OSI recognized license: MIT License: LICENSE:0"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"name":"Fuzzing","score":0,"reason":"project is not fuzzed","details":["Warn: no fuzzer integrations found"],"documentation":{"short":"Determines if the project uses fuzzing.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#fuzzing"}},{"name":"Branch-Protection","score":0,"reason":"branch protection not enabled on development/release branches","details":["Warn: branch protection not enabled for branch 'master'"],"documentation":{"short":"Determines if the default and release branches are protected with GitHub's branch protection settings.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#branch-protection"}}]},"last_synced_at":"2025-08-22T20:58:54.440Z","repository_id":57334488,"created_at":"2025-08-22T20:58:54.440Z","updated_at":"2025-08-22T20:58:54.440Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32490810,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-30T13:12:12.517Z","status":"online","status_checked_at":"2026-05-01T02:00:05.856Z","response_time":64,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"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":["material-ui","react","react-component","react-form","react-formutil","react-md"],"created_at":"2024-11-20T19:29:18.670Z","updated_at":"2026-05-01T08:32:45.808Z","avatar_url":"https://github.com/qiqiboy.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-md-formutil\n\n[![npm](https://img.shields.io/npm/v/react-md-formutil.svg?style=flat)](https://npm.im/react-md-formutil)\n\nHappy to use react-formutil in the project based on `react-md` ^\\_^\n\n在 [react-md](https://github.com/mlaursen/react-md) 项目，结合[react-formutil](https://github.com/qiqiboy/react-formutil) 来快速构建表单。\n\n\u003e **如果你在使用其他 react 组件库，可以查阅：**\n\u003e\n\u003e 1. ant-design [`react-antd-formutil`](https://github.com/qiqiboy/react-antd-formutil) [![npm](https://img.shields.io/npm/v/react-antd-formutil.svg?style=flat)](https://npm.im/react-antd-formutil)\n\u003e 1. Material-UI [`react-material-formutil`](https://github.com/qiqiboy/react-material-formutil) [![npm](https://img.shields.io/npm/v/react-material-formutil.svg?style=flat)](https://npm.im/react-material-formutil)\n\u003e 1. react-bootstrap [`react-bootstrap-formutil`](https://github.com/qiqiboy/react-bootstrap-formutil) [![npm](https://img.shields.io/npm/v/react-bootstrap-formutil.svg?style=flat)](https://npm.im/react-bootstrap-formutil)\n\n\u003c!-- vim-markdown-toc GFM --\u003e\n\n- [安装 Installation](#安装-installation)\n- [使用 Usage](#使用-usage)\n    + [`\u003cFormItem /\u003e`](#formitem-)\n        * [`name`](#name)\n        * [`$defaultValue`](#defaultvalue)\n        * [`$validators`](#validators)\n        * [`$parser`](#parser)\n        * [`$formatter`](#formatter)\n        * [`checked` `unchecked`](#checked-unchecked)\n        * [`validMessage`](#validmessage)\n        * [`valuePropName` `changePropName` `focusPropName` `blurPropName`](#valuepropname-changepropname-focuspropname-blurpropname)\n    + [`支持的组件`](#支持的组件)\n        * [`Autocomplete`](#autocomplete)\n        * [`TextField`](#textfield)\n        * [`Slider`](#slider)\n        * [`SelectField`](#selectfield)\n        * [`DatePicker`](#datepicker)\n        * [`TimePicker`](#timepicker)\n        * [`Checkbox` `Radio` `Switch` `SelectionControl`](#checkbox-radio-switch-selectioncontrol)\n        * [`SelectionControlGroup`](#selectioncontrolgroup)\n- [FAQ](#faq)\n    + [`给组件设置的 onChange、onFocus 等方法无效、不执行`](#给组件设置的-onchangeonfocus-等方法无效不执行)\n\n\u003c!-- vim-markdown-toc --\u003e\n\n### 安装 Installation\n\n```bash\n# npm\nnpm install react-md-formutil --save\n\n# yarn\nyarn install react-md-formutil\n```\n\n### 使用 Usage\n\n\u003e `react-md-formutil` 整合了 `react-formutil` 的组件，所以可以直接从`react-md-formutil`中导出所需要的 `react-formutil` 组件。不用单独从 `react-formutil` 中导出。\n\n先看一个使用示例（点击查看在线完整示例 :\n[react-md-formutil on codesandbox.io](https://codesandbox.io/s/8lr059q8ll)）：\n\n```javascript\nimport React, { Component } from 'react';\nimport { withForm, FormItem } from 'react-md-formutil';\nimport { TextField } from 'react-md'; // 导入mui的TextField组件\n\n@withForm\nclass MyForm extends Component {\n    submit = () =\u003e {\n        const { $invalid, $getFirstError, $params } = this.props.$formutil;\n\n        if ($invalid) {\n            alert($getFistError());\n        } else {\n            // submit your data\n        }\n    };\n\n    render() {\n        return (\n            \u003cform onSubmit={this.onSubmit}\u003e\n                \u003cFormItem name=\"username\" required\u003e\n                    \u003cTextField type=\"text\" /\u003e\n                \u003c/FormItem\u003e\n            \u003c/form\u003e\n        );\n    }\n}\n```\n\n`FormItem`是 `react-md-formuitl` 新增加的组件，`withForm`是`react-formutil`的组件（没错，你可以直接从`react-md-formutil`中导出`react-formutil`的组件啦）。\n\n只需要将`react-md`的交互组件，嵌套在`FormItem`下，即可实现自动的表单状态同步。\n\n#### `\u003cFormItem /\u003e`\n\n要实现将`react-md`的交互组件的值能同步到 `react-formutil` 的状态中，需要通过 `FormItem` 这个组件来实现中间态绑定。\n\n`FormItem`是针对`react-md`中的表单类组件增加的包装组件，只需要将`react-md`中的相关表单类组件嵌套放置在`FormItem`下，即可轻松实现表单的校验与状态收集同步！\n\n\u003e **注意：**`FormItem`下只允许放置一个表单组件，不允许多个。\n\n##### `name`\n\n设置输入项的 name 值，表单项将会以 name 作为 key 收集到 formutil 的状态中。支持嵌套语法 _（同`react-formutil`的`Field`同\n名参数，可以参考 [name](https://github.com/qiqiboy/react-formutil#name)）_\n\n##### `$defaultValue`\n\n设置该表单项的默认值 _（同`react-formutil`的`Field`同名参数，可以参\n考[$defaultvalue](https://github.com/qiqiboy/react-formutil#defaultvalue)）_\n\n##### `$validators`\n\n设置校验方法 _（同`react-formutil`的`Field`同名参数 , 可以参考\n[$validators](https://github.com/qiqiboy/react-formutil#validators)）_\n\n\u003e 同 react-formutil 的 EasyField，FormItem 也内置了同样的校验规则：\n\n\u003e -   `required` 必填 `required`\n\u003e -   `maxLength` 。最大输入长度，有效输入时才会校验 `maxLength=\"100\"`\n\u003e -   `minLength` 最小输入长度，有效输入时才会校验 `minLength=\"10\"`\n\u003e -   `max` 最大输入数值，仅支持 Number 比较。有效输入时才会校验 `max=\"100\"`\n\u003e -   `min` 最小输入数值，仅支持 Number 比较。有效输入时才会校验 `min=\"10\"`\n\u003e -   `pattern` 正则匹配。有效输入时才会校验 `pattern={/^\\d+$/}`\n\u003e -   `enum` 枚举值检测。有效输入时才会校验 `enum={[1,2,3]}`\n\u003e -   `checker` 自定义校验函数。`checker={value =\u003e value \u003e 10 \u0026\u0026 value \u003c 100 || ' 输入比如大于 10 小与 100'}`\n\n注：校验属性的值为 `null` 时表示不进行该校验\n\n内置的校验规则无需再次声明，除非规则不符合预期，需要替换，则可以通过`$validators` 传递同名校验方法即可替换默认的。另外，\n内置的校验规则，如果校验不通过，会尝试去 `validMessage` 匹配错误信息。\n\n##### `$parser`\n\n设置输入的值收集到 formutil 状态中时的过滤处理。默认为`value =\u003e value`\n\n```javascript\n\u003cFormItem $parser={value =\u003e parseInt(value)}\u003e\n    \u003cTextField /\u003e\n\u003c/FormItem\u003e\n```\n\n##### `$formatter`\n\n设置 formutil 中的值渲染到输入组件上时的过滤处理。默认为`value =\u003e value`\n\n```javascript\n\u003cFormItem $formatter={value =\u003e '$' + value}\u003e\n    \u003cTextField /\u003e\n\u003c/FormItem\u003e\n```\n\n##### `checked` `unchecked`\n\n对于 `\u003cSelectionControl /\u003e` `\u003cSwitch /\u003e` `\u003cCheckbox /\u003e` `\u003cRadio /\u003e` 等，其值默认是 checked 属性，为布尔值。可以通过`checked`\n`unchecked`来设置 checked 状态时所要映射的值：\n\n```javascript\n\u003cFormItem checked=\"yes\" unchecked=\"no\"\u003e\n    \u003cSwitch /\u003e\n\u003c/FormItem\u003e\n```\n\n该示例中， 当 Switch 为开时，获取的值将为 yes。\n\n##### `validMessage`\n\n设置校验结果的错误信息。\n\n```javascript\n\u003cFormItem\n    name=\"username\"\n    required\n    validMessage={{\n        required: '请输入用户名'\n    }}\u003e\n    \u003cTextField /\u003e\n\u003c/FormItem\u003e\n```\n\n##### `valuePropName` `changePropName` `focusPropName` `blurPropName`\n\n该四个参数可以用来设置绑定到组件上的值或者值变动、是否聚焦等事件回调。该项一般不需要设置，`FormItem` 已经针对 `react-md`\n中的所有 `data-entry` 型组件做了兼容处理。\n\n对于一些特殊场景，例如不需要同步 `focus`、`blur`，则可以通过将该值设为`{null}`来禁用：\n\n```javascript\n//禁用focus、blur状态同步\n\u003cFormItem focusPropName={null} blurPropName={null} name=\"username\"\u003e\n    \u003cTextField /\u003e\n\u003c/FormItem\u003e\n```\n\n#### `支持的组件`\n\n##### [`Autocomplete`](https://react-md.mlaursen.com/components/autocompletes)\n\n```javascript\n\u003cFormItem name=\"autocomplete\"\u003e\n    \u003cAutocomplete /\u003e\n\u003c/FormItem\u003e\n```\n\n##### [`TextField`](https://react-md.mlaursen.com/components/text-fields)\n\n```javascript\n\u003cFormItem name=\"name\"\u003e\n    \u003cTextField /\u003e\n\u003c/FormItem\u003e\n```\n\n##### [`Slider`](https://react-md.mlaursen.com/components/sliders)\n\n```javascript\n\u003cFormItem name=\"age\"\u003e\n    \u003cSlider /\u003e\n\u003c/FormItem\u003e\n```\n\n##### [`SelectField`](https://react-md.mlaursen.com/components/select-fields)\n\n```javascript\n\u003cFormItem name=\"age\"\u003e\n    \u003cSelectField id=\"select-field-1\" label=\"Numbers\" menuItems={NUMBER_ITEMS} /\u003e\n\u003c/FormItem\u003e\n```\n\n##### [`DatePicker`](https://react-md.mlaursen.com/components/pickers/date)\n\n```javascript\n\u003cFormItem name=\"date\"\u003e\n    \u003cDatePicker id=\"appointment-date-portrait\" label=\"Portrait mode\" className=\"md-cell\" displayMode=\"portrait\" /\u003e\n\u003c/FormItem\u003e\n```\n\n##### [`TimePicker`](https://react-md.mlaursen.com/components/pickers/time)\n\n```javascript\n\u003cFormItem name=\"date\"\u003e\n    \u003cTimePicker id=\"appointment-time-landscape\" label=\"Landscape mode\" className=\"md-cell\" displayMode=\"landscape\" /\u003e\n\u003c/FormItem\u003e\n```\n\n##### [`Checkbox` `Radio` `Switch` `SelectionControl`](https://react-md.mlaursen.com/components/selection-controls)\n\n```javascript\n\u003cFormItem name=\"selection-control\"\u003e\n    \u003cSelectionControl\n        id=\"checkbox-read-documentation-page\"\n        name=\"simple-checkboxes[]\"\n        label=\"Open SelectionControl documentation page\"\n        type=\"checkbox\"\n    /\u003e\n\u003c/FormItem\u003e\n\n\u003cFormItem name=\"checkbox\"\u003e\n    \u003cCheckbox\n      id=\"checkbox-read-material-design-spec\"\n      name=\"simple-checkboxes[]\"\n      label=\"Read Material Design Specifications\"\n    /\u003e\n\u003c/FormItem\u003e\n```\n\n##### [`SelectionControlGroup`](https://react-md.mlaursen.com/components/selection-controls)\n\n```javascript\n\u003cFormItem name=\"checkbox-group\" required\u003e\n    \u003cSelectionControlGroup\n        id=\"selection-control-group-checkboxs\"\n        name=\"radio-example\"\n        type=\"checkbox\"\n        label=\"SelectionControlGroup.checkbox\"\n        controls={controls}\n    /\u003e\n\u003c/FormItem\u003e\n```\n\n### FAQ\n\n#### `给组件设置的 onChange、onFocus 等方法无效、不执行`\n\n`FormItem`会覆盖掉直接添加到 react-md 组件上的`onFocus` `onBlur` `onChange`方法，所以如果需要这三个事件方法，需要添加到\n`FormItem`上：\n\n```javascript\n\u003cFormItem name=\"test\" onChange={ev =\u003e console.log('change', ev)} onFocus={ev =\u003e console.log('focus', ev)}\u003e\n    \u003cTextField /\u003e\n\u003c/FormItem\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiqiboy%2Freact-md-formutil","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqiqiboy%2Freact-md-formutil","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiqiboy%2Freact-md-formutil/lists"}