react-form-helper

描述

react-form的辅助工具包

安装

1npm i --save @kne/react-form-helper

概述

桥接UI组件库的Form输入组件和@kne/react-form

示例(全屏)

示例代码

• 基本示例
• 简单的form到input组件的绑定
• _ReactFormHelper(@kne/current-lib_react-form-helper),antd(antd),_ReactForm(@kne/react-form),remoteLoader(@kne/remote-loader)

1const { createWithRemoteLoader } = remoteLoader;
2const { hooks, widget, utils } = _ReactFormHelper;
3const { default: Form, useSubmit } = _ReactForm;
4const { Input: InputField, Button, Flex } = antd;
5
6const { useDecorator } = hooks;
7const { EnterSubmit, FormStore, ScrollToError } = widget;
8
9const Input = (props) => {
10  const render = useDecorator(Object.assign({ placeholder: `请输入${props.label}` }, props));
11  return render(InputField);
12};
13
14const SubmitButton = ({ type = 'primary', realTime, realtime, disabled = false, ...props }) => {
15  const { isPass, isLoading, ...submitProps } = useSubmit(props);
16  if (typeof realTime === 'boolean') {
17    console.error(`warning: realTime参数已废弃，请使用realtime，后续版本可能回删除realTime的支持`);
18  }
19  return (<Button type={type} loading={isLoading}
20                  disabled={disabled || (realtime ? !isPass : false)} {...props} {...submitProps} />);
21};
22
23const BaseExample = createWithRemoteLoader({
24  modules: ['InfoPage', 'Modal@useConfirmModal']
25})(({ remoteModules }) => {
26  const [InfoPage, useConfirmModal] = remoteModules;
27  const modal = useConfirmModal();
28  const formInner = <Flex vertical gap="middle">
29    <Input name="name" label="名称" rule="REQ LEN-0-10" />
30    <Input name="email" label="邮箱" rule="REQ EMAIL" />
31    <SubmitButton>提交</SubmitButton>
32  </Flex>;
33  return <InfoPage>
34    <InfoPage.Part title="简单表单">
35      <Form onSubmit={(data) => {
36        modal({
37          type: 'info', message: JSON.stringify(data, null, 2)
38        });
39      }}>
40        {formInner}
41      </Form>
42    </InfoPage.Part>
43    <InfoPage.Part title="自动滚动到错误位置">
44      <Form onSubmit={(data) => {
45        modal({
46          type: 'info', message: JSON.stringify(data, null, 2)
47        });
48      }} onError={(errors) => {
49        modal({
50          type: 'error',
51          message: JSON.stringify(errors.map((item) => ({ label: item.label, errMsg: item.errMsg })), null, 2)
52        });
53      }}>
54        <ScrollToError />
55        {formInner}
56      </Form>
57    </InfoPage.Part>
58    <InfoPage.Part title="回车提交表单">
59      <Form onSubmit={(data) => {
60        modal({
61          type: 'info', message: JSON.stringify(data, null, 2)
62        });
63      }} onError={(errors) => {
64        modal({
65          type: 'error',
66          message: JSON.stringify(errors.map((item) => ({ label: item.label, errMsg: item.errMsg })), null, 2)
67        });
68      }}>
69        <EnterSubmit>
70          {formInner}
71        </EnterSubmit>
72      </Form>
73    </InfoPage.Part>
74    <InfoPage.Part title="表单缓存">
75      <Form onSubmit={(data) => {
76        modal({
77          type: 'info', message: JSON.stringify(data, null, 2)
78        });
79      }} onError={(errors) => {
80        modal({
81          type: 'error',
82          message: JSON.stringify(errors.map((item) => ({ label: item.label, errMsg: item.errMsg })), null, 2)
83        });
84      }}>
85        <FormStore cache="test-form-cache" />
86        <EnterSubmit>
87          {formInner}
88        </EnterSubmit>
89      </Form>
90    </InfoPage.Part>
91  </InfoPage>;
92});
93
94render(<BaseExample />);
95

API