{"id":18275942,"url":"https://github.com/zuolung/react-form-design","last_synced_at":"2026-04-26T12:31:23.252Z","repository":{"id":104549596,"uuid":"389038532","full_name":"zuolung/react-form-design","owner":"zuolung","description":"React form assembly, implementing the React form data external","archived":false,"fork":false,"pushed_at":"2021-08-10T08:29:23.000Z","size":1148,"stargazers_count":2,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-07-03T07:45:25.653Z","etag":null,"topics":["from","rc-form","react"],"latest_commit_sha":null,"homepage":"https://zuolung.github.io/react-form-design/dist/index.html","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/zuolung.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":"2021-07-24T08:04:22.000Z","updated_at":"2022-08-12T03:07:28.000Z","dependencies_parsed_at":"2023-03-13T14:54:33.926Z","dependency_job_id":null,"html_url":"https://github.com/zuolung/react-form-design","commit_stats":{"total_commits":17,"total_committers":2,"mean_commits":8.5,"dds":"0.47058823529411764","last_synced_commit":"4076598330ecf51dcb339ee5233ae3a264e16b93"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zuolung/react-form-design","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zuolung%2Freact-form-design","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zuolung%2Freact-form-design/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zuolung%2Freact-form-design/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zuolung%2Freact-form-design/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zuolung","download_url":"https://codeload.github.com/zuolung/react-form-design/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zuolung%2Freact-form-design/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32297893,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-26T09:34:17.070Z","status":"ssl_error","status_checked_at":"2026-04-26T09:34:00.993Z","response_time":129,"last_error":"SSL_read: 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":["from","rc-form","react"],"created_at":"2024-11-05T12:14:32.769Z","updated_at":"2026-04-26T12:31:23.233Z","avatar_url":"https://github.com/zuolung.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-form-design\n\n### Demo online\n\n[在线查看](https://zuolung.github.io/react-form-design/dist/index.html)\n\n### install\n\nnpm i react-form-art -S\n\n### API\n\n### Form\n\n| 属性           | 说明                   | 类型            | 默认值 |\n| -------------- | ---------------------- | --------------- | ------ |\n| className      | form 标签类名          | string          | ''     |\n| initValues     | 表单项统一初始化       | Object          | {}     |\n| onFinish       | 表单提交触发           | Function        | {}     |\n| onFinishFailed | 表单提交触发           | Function        | {}     |\n| ref            | 可获取表单仓库实例方法 | React.RefObject | {}     |\n\n##### FormItem\n\n| 属性              | 说明                                                       | 默认值                                                                    | 版本       |\n| ----------------- | ---------------------------------------------------------- | ------------------------------------------------------------------------- | ---------- |\n| className         | FormItem 容器的类名                                        | string                                                                    | -          |\n| labelClassName    | label 的类名                                               | string                                                                    | -          |\n| controllClassName | 表单项所在容器的类名                                       | string                                                                    | -          |\n| requiredClassName | 必填标识的类名                                             | string                                                                    | -          |\n| requiredIcon      | 自定义必填标识 icon                                        | React.ReactNode                                                           | -          |\n| label             | label 标签的文本                                           | React.ReactNode                                                           | -          |\n| labelWidth        | label 标签的文本                                           | number                                                                    | -          |\n| name              | 表单项字段名称                                             | string                                                                    | -          |\n| rules             | 表单项校验逻辑, message 属性针对 rule 为 RegExp 触发       | { rule: RegExp 或者 Function：(value, call)=\u003e {call(null)}, message: '' } | -          |\n| trigger           | 表单项更改的方法名                                         | string                                                                    | 'onChange' |\n| validateTrigger   | 表单项规则校验触发的方法名                                 | string                                                                    | 'onBlur'   |\n| required          | 表单项是否必填                                             | Boolean                                                                   | false      |\n| messageShow       | 表单项错误提示类型, 错误的时候提示，成功的时候提示，都提示 | 'failed'/'success'/'all'/'hidden'                                         | 'all'      |\n\n### form 实例的方法\n\n```\nfunction Demo() {\n  const form = React.useRef(null)\n  return \u003cForm ref={form}\u003e...\u003c/Form\u003e\n}\n```\n\nform.current 的 API 如下：\n\n| 属性           | 说明                           | 类型                           |\n| -------------- | ------------------------------ | ------------------------------ |\n| getFieldValue  | 传入表单主键，返回表单值       | （key: String）=\u003e FieldValue   |\n| getFieldsValue | 获取所有表单值                 | Object =\u003e FieldValues          |\n| resetFields    | 重置表单所有值                 | values:Object =\u003e void          |\n| setFields      | 设置表单值                     | values:Object =\u003e void          |\n| submit         | 提交方法，回掉参数是否校验完成 | (boolean, FieldValues) =\u003e void |\n\n### 基本使用\n\n```\nimport { InputItem, Button, Picker } from \"antd-mobile\";\nimport Form from \"react-form-art\";\nimport React from \"react\";\n\nconst FormItem = Form.FormItem\nconst seasons = [\n  [\n    {\n      label: '2013',\n      value: '2013',\n    },\n    {\n      label: '2014',\n      value: '2014',\n    },\n  ],\n  [\n    {\n      label: '春',\n      value: '春',\n    },\n    {\n      label: '夏',\n      value: '夏',\n    },\n  ],\n];\n\nfunction Demo() {\n  const form = React.useRef(null)\n  React.useEffect(() =\u003e {\n    console.log(form.current, '\u003cform.current')\n  }, [])\n\n  const handleClick = () =\u003e {\n    form.current.submit((t) =\u003e {\n      console.log(t)\n    })\n  }\n\n  return \u003cdiv style={{ padding: '50px 20px 0 20px' }} \u003e\n    \u003cForm\n      initialValues={{ name: '我是初始值' }}\n      ref={form}\n      onFinish\n    \u003e\n      \u003cFormItem\n        label=\"我的名称\"\n        labelWidth={150}\n        name=\"name\"\n        required\n        rules={{\n          rule: /[\\u4e00-\\u9fa5]/,\n          message: '名称仅支持中文',\n        }}\n        validateTrigger=\"onBlur\"\n      \u003e\n        \u003cInputItem\n          placeholder=\"请输入名称（中文）\"\n        /\u003e\n      \u003c/FormItem\u003e\n\n      \u003cdiv style={{ color: 'blue', marginBottom: 20 }}\u003e\n        （我的名称）输入字数大于两个 的时候要选择夏季\n      \u003c/div\u003e\n\n      \u003cFormItem\n        label=\"季节选择\"\n        labelWidth={150}\n        name=\"yearSeason\"\n        validateTrigger=\"onOk\"\n        trigger=\"onOk\"\n        messageShow=\"failed\"\n        rules={{\n          rule: (values, call) =\u003e {\n            if (form.current.getFieldValue('name').length \u003e 2) {\n              if (values[1] !== '夏') {\n                call('此时要选择夏季')\n              }\n            } else call(null)\n          }\n        }}\n      \u003e\n        \u003cPicker\n          data={seasons}\n          title=\"选择季节\"\n          cascade={false}\n        \u003e\n          \u003cList.Item arrow=\"horizontal\" style={{ width: 200 }} /\u003e\n        \u003c/Picker\u003e\n      \u003c/FormItem\u003e\n\n      \u003cButton onClick={handleClick}\u003e提交\u003c/Button\u003e\n    \u003c/Form\u003e\n  \u003c/div\u003e\n}\n\nexport default Demo;\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzuolung%2Freact-form-design","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzuolung%2Freact-form-design","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzuolung%2Freact-form-design/lists"}