{"id":21195629,"url":"https://github.com/qiqiboy/react-am-formutil","last_synced_at":"2025-09-05T01:47:56.978Z","repository":{"id":57332835,"uuid":"182061971","full_name":"qiqiboy/react-am-formutil","owner":"qiqiboy","description":"Happy to use react-formutil in the project based on antd-mobile^_^","archived":false,"fork":false,"pushed_at":"2019-05-09T06:34:21.000Z","size":502,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-09-05T01:47:50.534Z","etag":null,"topics":["antd-mobile","antd-mobile-form","react-forms","react-formutil"],"latest_commit_sha":null,"homepage":"http://github.boy.im/react-am-formutil/demo/","language":"TypeScript","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/qiqiboy.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}},"created_at":"2019-04-18T09:50:56.000Z","updated_at":"2019-05-09T06:34:23.000Z","dependencies_parsed_at":"2022-09-12T00:12:18.024Z","dependency_job_id":null,"html_url":"https://github.com/qiqiboy/react-am-formutil","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/qiqiboy/react-am-formutil","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Freact-am-formutil","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Freact-am-formutil/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Freact-am-formutil/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Freact-am-formutil/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/qiqiboy","download_url":"https://codeload.github.com/qiqiboy/react-am-formutil/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/qiqiboy%2Freact-am-formutil/sbom","scorecard":{"id":753715,"data":{"date":"2025-08-11","repo":{"name":"github.com/qiqiboy/react-am-formutil","commit":"a523d4aa6ce34f598dcf90e654ddfb16f5aa0cc2"},"scorecard":{"version":"v5.2.1-40-gf6ed084d","commit":"f6ed084d17c9236477efd66e5b258b9d4cc7b389"},"score":2.6,"checks":[{"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":"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":"Code-Review","score":0,"reason":"Found 0/11 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":"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":"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":"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":"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":"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":"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":"License","score":0,"reason":"license file not detected","details":["Warn: project does not have a license file"],"documentation":{"short":"Determines if the project has defined a license.","url":"https://github.com/ossf/scorecard/blob/f6ed084d17c9236477efd66e5b258b9d4cc7b389/docs/checks.md#license"}},{"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":"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":"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:50.927Z","repository_id":57332835,"created_at":"2025-08-22T20:58:50.927Z","updated_at":"2025-08-22T20:58:50.927Z"},"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":273699718,"owners_count":25152285,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-04T02:00:08.968Z","response_time":61,"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":["antd-mobile","antd-mobile-form","react-forms","react-formutil"],"created_at":"2024-11-20T19:29:19.208Z","updated_at":"2025-09-05T01:47:51.954Z","avatar_url":"https://github.com/qiqiboy.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-am-formutil\n\n[![npm](https://img.shields.io/npm/v/react-am-formutil.svg?style=flat)](https://npm.im/react-am-formutil)\n[![peerDependencies](https://img.shields.io/npm/dependency-version/react-am-formutil/peer/react.svg?color=yellowgreen)](https://reactjs.org)\n[![definitionTypes](https://img.shields.io/npm/types/react-am-formutil.svg)](https://github.com/qiqiboy/react-am-formutil/blob/master/dist/index.d.ts)\n[![gzip](https://img.shields.io/bundlephobia/minzip/react-am-formutil.svg)](https://npm.im/react-am-formutil)\n[![download](https://img.shields.io/npm/dm/react-am-formutil.svg)](https://npm.im/react-am-formutil)\n[![issues](https://img.shields.io/github/issues/qiqiboy/react-am-formutil.svg)](https://github.com/qiqiboy/react-am-formutil/issues)\n[![license](https://img.shields.io/github/license/qiqiboy/react-am-formutil.svg)](https://github.com/qiqiboy/react-am-formutil/blob/master/LICENSE)\n[![github](https://img.shields.io/github/last-commit/qiqiboy/react-am-formutil.svg)](https://github.com/qiqiboy/react-am-formutil)\n[![github](https://img.shields.io/github/release-date/qiqiboy/react-am-formutil.svg)](https://github.com/qiqiboy/react-am-formutil/releases)\n[![github](https://img.shields.io/github/commit-activity/m/qiqiboy/react-am-formutil.svg)](https://github.com/qiqiboy/react-am-formutil/commits/master)\n[![github](https://img.shields.io/github/stars/qiqiboy/react-am-formutil.svg?style=social)](https://github.com/qiqiboy/react-am-formutil)\n\n[![react-am-formutil](https://nodei.co/npm/react-am-formutil.png?compact=true)](https://npm.im/react-am-formutil)\n\nHappy to use react-formutil in the project based on antd-mobile^\\_^\n\n在 [antd-mobile](https://mobile.ant.design) 项目，结合 [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.  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\u003e 1.  react-md [`react-md-formutil`](https://github.com/qiqiboy/react-md-formutil) [![npm](https://img.shields.io/npm/v/react-md-formutil.svg?style=flat)](https://npm.im/react-md-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\n\u003c!-- vim-markdown-toc GFM --\u003e\n\n- [安装 Installation](#安装-installation)\n- [使用 Usage](#使用-usage)\n    + [`\u003cFormItem /\u003e`](#formitem-)\n        * [`label`](#label)\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        * [`errorLevel`](#errorlevel)\n    + [`setErrorLevel(level)`](#seterrorlevellevel)\n    + [`支持的组件`](#支持的组件)\n        * [`Checkbox` `Checkbox.CheckboxItem`](#checkbox-checkboxcheckboxitem)\n        * [`Radio` `Radio.RadioItem`](#radio-radioradioitem)\n        * [`Switch`](#switch)\n        * [`DatePicker` `DatePickerView`](#datepicker-datepickerview)\n        * [`Picker` `PickerView`](#picker-pickerview)\n        * [`InputItem` `TextareaItem`](#inputitem-textareaitem)\n        * [`Slider` `Range`](#slider-range)\n        * [`Stepper`](#stepper)\n        * [`CheckboxGroup` `RadioGroup`](#checkboxgroup-radiogroup)\n- [FAQ](#faq)\n    + [`给组件设置的onChange、onFocus等方法无效、不执行`](#给组件设置的onchangeonfocus等方法无效不执行)\n\n\u003c!-- vim-markdown-toc --\u003e\n\n### 安装 Installation\n\n[![react-am-formutil](https://nodei.co/npm/react-am-formutil.png?compact=true)](https://npm.im/react-am-formutil)\n\n```bash\n# npm\nnpm install react-am-formutil --save\n\n# yarn\nyarn install react-am-formutil\n```\n\n### 使用 Usage\n\n\u003e `react-am-formutil` 整合了 `react-formutil` 的组件，所以可以直接从`react-am-formutil`中导出所需要的 `react-formutil` 组件。不用单独从 react-formutil 中导出。\n\n先看一个简单的示例：\n\n```javascript\nimport React, { Component } from 'react';\nimport { withForm, FormItem } from 'react-am-formutil';\nimport { List, InputItem } from 'antd-mobile';\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 noValidate onSubmit={this.onSubmit}\u003e\n                \u003cList\u003e\n                    \u003cFormItem name=\"username\"\u003e\n                        \u003cInputItem /\u003e\n                    \u003c/FormItem\u003e\n                \u003c/List\u003e\n            \u003c/form\u003e\n        );\n    }\n}\n```\n\n`react-am-formutil`提供了一个 `FormItem` 组件，通过将`antd-mobile`的`data-entry`型组件（例如, InputItem、Checkbox.CheckboxItem 等），直接当作 children 传递给该组件，来实现对`data-entry`型组件的值的捕获与同步。\n\n#### `\u003cFormItem /\u003e`\n\n`antd-mobile`的表单型组件，大多数都是结合了其`List.Item`，所以我们提供的`FormItem`也会使用`List.Item`来包装 UI。如果你不希望如此，请直接使用`react-formutil`提供的`EasyField`组件即可。\n\n在使用前，需要知晓以下原则：\n\n-   `FormItem` 应当嵌套放置在`\u003cList /\u003e`组件下方使用。\n-   `FormItem` 不提供额外的错误信息展示，这是因为本身`List.Item`也没有提供很好的错误信息展示的设计。如果需要对用户展示错误信息提示，应当使用`Toast` `Modal`等组件提示。\n-   `FormItem` 提供了额外的`am-formutil-xxx`的 className 支持，你可以通过这些 classNames 来使用 css 控制表单项的错误反馈显示。\n\n**支持传递的属性**\n\n`FormItem`是基于`EasyField`组件实现的，所以它可以接收所有的`EasyField`支持的属性；另外它也可以接收一些`List.Item`或者`Checkbox.CheckboxItem`等组件的属性（根据嵌套传递的组件变化）。\n\n这里介绍几个和表单处理相关的常用属性：\n\n##### `label`\n\n表单项的标题/名字，支持字符串或者 reactNode。需要注意的是，并不是所有的组件都支持`label`，对于部分组件，例如`Slider` `Range`等，该属性是无效的。\n\n```javascript\n\u003cFormItem name=\"username\" label=\"用户名\"\u003e\n    \u003cInputItem /\u003e\n\u003c/FormItem\u003e\n```\n\n##### `name`\n\n设置输入项的 name 值，表单项将会以 name 作为 key 收集到 formutil 的状态中。支持嵌套语法 _（同`react-formutil`的`Field`同名参数，可以参考 [name](https://github.com/qiqiboy/react-formutil#name)）_\n\n##### `$defaultValue`\n\n设置该表单项的默认值 _（同`react-formutil`的`Field`同名参数，可以参考[\\$defaultvalue](https://github.com/qiqiboy/react-formutil#defaultvalue)）_\n\n##### `$validators`\n\n设置校验方法 _（同`react-formutil`的`Field`同名参数, 可以参考 [\\$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` 传递同名校验方法即可替换默认的。另外，内置的校验规则，如果校验不通过，会尝试去 `validMessage` 匹配错误信息。\n\n##### `$parser`\n\n请参考`react-formutil`中[`$parser`](https://github.com/qiqiboy/react-formutil#parser)介绍。\n\n##### `$formatter`\n\n请参考`react-formutil`中[`$formatter`](https://github.com/qiqiboy/react-formutil#formatter)介绍。\n\n##### `checked` `unchecked`\n\n对于 `\u003cSwitch /\u003e` `\u003cCheckbox /\u003e` `\u003cRadio /\u003e` 等组件，其值默认是 checked 属性，为布尔值。可以通过`checked` `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    \u003cInputItem /\u003e\n\u003c/FormItem\u003e\n```\n\n##### `valuePropName` `changePropName` `focusPropName` `blurPropName`\n\n该四个参数可以用来设置绑定到组件上的值或者值变动、是否聚焦等事件回调。该项一般不需要设置，`FormItem` 已经针对 `antd` 中的所有 `data-entry` 型组件做了兼容处理。\n\n对于一些特殊场景，例如不需要同步 `focus`、`blur`，则可以通过将该值设为`{null}`来禁用：\n\n```javascript\n//禁用focus、blur状态同步\n\u003cFormItem focusPropName={null} blurPropName={null} name=\"username\"\u003e\n    \u003cInputItem /\u003e\n\u003c/FormItem\u003e\n```\n\n##### `errorLevel`\n\n用来覆盖全局的 errorLevel 设置。参考[`setErrorLevel(level)`](#seterrorlevellevel)\n\n#### `setErrorLevel(level)`\n\n`setErrorLevel` 该方法可以用来全局设置错误信息何时出现，有三个级别可以设置：\n\n-   `0` 当`$dirty` `$touched` `$invalid` 都为 true 时\n-   `1` 当`$dirty` `$invalid` 都为 true 时\n-   `2` 当`$invalid` 为 true 时\n-   `off` 关闭错误显示\n\n默认值为 `1`\n\n\u003e 注意，该方法影响全局，如果只是希望单独对某个表单项进行设置，可以通过`errorLevel`属性进行设置：参考[`errorLevel`](#errorlevel)\n\n```javascript\nimport { setErrorLevel } from 'react-antd-formutil';\n\nsetErrorLevel(0);\n\n// 当关闭错误显示时，errorLevel='off'，你可以手动自行设置错误展示方式：\n\u003cFormGroup name=\"errorOff\" errorLevel=\"off\"\u003e\n    \u003cInputItem /\u003e\n\u003c/FormGroup\u003e;\n```\n\n#### `支持的组件`\n\n##### `Checkbox` `Checkbox.CheckboxItem`\n\n```javascript\n\u003cFormItem name=\"agree\" label=\"我同意\"\u003e\n    \u003cCheckbox /\u003e\n\u003c/FormItem\u003e\n\n\u003cFormItem name=\"agree\" label=\"我同意\"\u003e\n    \u003cCheckbox.CheckboxItem /\u003e\n\u003c/FormItem\u003e\n```\n\n**小技巧** 可以通过传递`checked` `unchecked`属性来改变映射到表单中的值\n\n##### `Radio` `Radio.RadioItem`\n\n##### `Switch`\n\n同`Checkbox`等用法\n\n##### `DatePicker` `DatePickerView`\n\n`DatePicker`不需要传递 children 属性：\n\n```javascript\n\u003cFormItem name=\"date\"\u003e\n    \u003cDatePicker /\u003e\n\u003c/FormItem\u003e\n```\n\n`DatePickerView`不支持`label`：\n\n```javascript\n\u003cFormItem name=\"date\" label\u003e\n    \u003cDatePickerView /\u003e\n\u003c/FormItem\u003e\n```\n\n##### `Picker` `PickerView`\n\n`Picker`不需要传递 children 属性：\n\n```javascript\n\u003cFormItem name=\"address\"\u003e\n    \u003cPicker data={data} /\u003e\n\u003c/FormItem\u003e\n```\n\n`PickerView`不支持`label`：\n\n```javascript\n\u003cFormItem name=\"address\" label\u003e\n    \u003cPickerView data={data} /\u003e\n\u003c/FormItem\u003e\n```\n\n**小技巧** 因为`Picker`组件总是返回数组值，你可以使用`$parser`来转换。\n\n##### `InputItem` `TextareaItem`\n\n```javascript\n\u003cFormItem name=\"password\"\u003e\n    \u003cInputItem type=\"password\" /\u003e\n\u003c/FormItem\u003e\n\n\u003cFormItem name=\"comment\"\u003e\n    \u003cTextareaItem count={200} /\u003e\n\u003c/FormItem\u003e\n```\n\n##### `Slider` `Range`\n\n```javascript\n\u003cFormItem name=\"age\"\u003e\n    \u003cSlider /\u003e\n\u003c/FormItem\u003e\n\n\u003cFormItem name=\"range\"\u003e\n    \u003cRange /\u003e\n\u003c/FormItem\u003e\n```\n\n##### `Stepper`\n\n```javascript\n\u003cFormItem name=\"amount\"\u003e\n    \u003cStepper /\u003e\n\u003c/FormItem\u003e\n```\n\n##### `CheckboxGroup` `RadioGroup`\n\n这两个组件不是`antd-mobile`提供的，而是由`react-am-formutil`提供的，用来实现多选组/单选组场景：\n\n```javascript\n// 需要从react-am-formutil中导出这两个组件\nimport { CheckboxGroup, RadioGroup, FormItem } from 'react-am-formutil';\n\n\u003cFormItem name=\"hobbies\"\u003e\n    \u003cCheckboxGroup\n        data={[\n            {\n                value: 'movie',\n                title: '电影'\n            },\n            {\n                value: 'music',\n                title: '音乐'\n            }\n        ]}\n    /\u003e\n\u003c/FormItem\u003e\n\n\u003cFormItem name=\"hobby\"\u003e\n    \u003cRadioGroup\n        data={[\n            {\n                value: 'movie',\n                title: '电影'\n            },\n            {\n                value: 'music',\n                title: '音乐'\n            }\n        ]}\n    /\u003e\n\u003c/FormItem\u003e;\n```\n\n这两个组件接收一个data属性，其至少包含`{value, title}`两个字段属性，还可以传递其它属性字段，它们将会传递给实际的`CheckboxItem`或者`RadioItem`组件。\n\n```javascript\n\u003cFormItem name=\"hobbies\"\u003e\n    \u003cCheckboxGroup\n        data={[\n            {\n                value: 'movie',\n                title: '电影',\n                disabled: true // 禁用该项选择\n            },\n            {\n                value: 'music',\n                title: '音乐'\n            }\n        ]}\n    /\u003e\n\u003c/FormItem\u003e\n```\n\n### FAQ\n\n#### `给组件设置的onChange、onFocus等方法无效、不执行`\n\n`FormItem`会覆盖掉直接添加到 antd-mobile 组件上的`onFocus` `onBlur` `onChange`方法，所以如果需要这三个事件方法，需要添加到 `FormItem`上：\n\n```javascript\n\u003cFormItem name=\"test\" onChange={ev =\u003e console.log('change', ev)} onFocus={ev =\u003e console.log('focus', ev)}\u003e\n    \u003cInputItem /\u003e\n\u003c/FormItem\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiqiboy%2Freact-am-formutil","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fqiqiboy%2Freact-am-formutil","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fqiqiboy%2Freact-am-formutil/lists"}