react-form的辅助工具包
npm install @kne/react-form-helperreact-form的辅助工具包
``shell`
npm 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)
`jsx
const { createWithRemoteLoader } = remoteLoader;
const { hooks, widget, utils } = _ReactFormHelper;
const { default: Form, useSubmit } = _ReactForm;
const { Input: InputField, Button, Flex } = antd;
const { useDecorator } = hooks;
const { EnterSubmit, FormStore, ScrollToError } = widget;
const Input = (props) => {
const render = useDecorator(Object.assign({ placeholder: 请输入${props.label} }, props));
return render(InputField);
};
const SubmitButton = ({ type = 'primary', realTime, realtime, disabled = false, ...props }) => {
const { isPass, isLoading, ...submitProps } = useSubmit(props);
if (typeof realTime === 'boolean') {
console.error(warning: realTime参数已废弃,请使用realtime,后续版本可能回删除realTime的支持);
}
return ( disabled={disabled || (realtime ? !isPass : false)} {...props} {...submitProps} />);
};
const BaseExample = createWithRemoteLoader({
modules: ['InfoPage', 'Modal@useConfirmModal']
})(({ remoteModules }) => {
const [InfoPage, useConfirmModal] = remoteModules;
const modal = useConfirmModal();
const formInner =
return
});
render(
``