pc-valtio-form-basic

安装

``bash
npm install @fairys/pc-valtio-form-basic # yarn add @fairys/pc-valtio-form-basic # pnpm add @fairys/pc-valtio-form-basic
`

表单参数

$3

部分参数依赖基础表单组件概览

布局

`ts
import type { FairysValtioFormLayoutAttrsProps } from '@fairys/valtio-form-basic';
export interface FairysPCValtioFormLayoutProps extends FairysValtioFormLayoutAttrsProps {}
export declare function FairysPCValtioFormLayout(props: FairysPCValtioFormLayoutProps): import("react/jsx-runtime").JSX.Element;
`

表单项

`ts
/*表单项/
import type { FairysValtioFormItemAttrsProps, MObject } from '@fairys/valtio-form-basic';
export interface FairysPCValtioFormItemProps = Record> extends React.DetailedHTMLProps, HTMLDivElement>, FairysValtioFormItemAttrsProps {
/*是否使用控制隐藏的表单项/
isHide?: boolean;
/*是否使用无样式表单项/
noStyle?: boolean;
}
/*普通表单项/
export declare function FairysPCValtioFormItemBase = Record>(props: Omit, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
/*控制隐藏的表单项/
export declare function FairysPCValtioFormHideItem = Record>(props: Omit, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
/*无样式表单项/
export declare function FairysPCValtioFormItemNoStyle = Record>(props: Omit, 'isHide' | 'noStyle'>): import("react/jsx-runtime").JSX.Element;
/*表单项基础组件(根据isHide和noStyle判断是否使用控制隐藏的表单项和无样式表单项)/
export declare function FairysPCValtioFormItem = Record>(props: FairysPCValtioFormItemProps): import("react/jsx-runtime").JSX.Element;
`

表单

`ts
import { FairysPCValtioFormItem, FairysPCValtioFormHideItem, FairysPCValtioFormItemBase } from './form.item';
import { useFairysValtioFormInstance, useFairysValtioFormInstanceContext, useFairysValtioFormInstanceContextState, useFairysValtioFormInstanceContextHideState } from '@fairys/valtio-form-basic';
import type { FairysValtioFormAttrsProps, FairysValtioFormInstance, MObject } from '@fairys/valtio-form-basic';
export interface FairysPCValtioFormProps = Record> extends FairysValtioFormAttrsProps {}

declare function FairysPCValtioFormBase = Record>(props: FairysPCValtioFormProps, ref: React.Ref>): import("react/jsx-runtime").JSX.Element;

export declare const FairysPCValtioForm: typeof FairysPCValtioFormBase & {
/*初始化实例/
useForm: typeof useFairysValtioFormInstance;
/*获取状态/
useFormState: typeof useFairysValtioFormInstanceContextState;
/*获取隐藏状态/
useFormHideState: typeof useFairysValtioFormInstanceContextHideState;
/*获取上下文实例/
useFormInstance: typeof useFairysValtioFormInstanceContext;
/*表单项基础组件/
FormItemBase: typeof FairysPCValtioFormItemBase;
/*表单项组件/
FormItem: typeof FairysPCValtioFormItem;
/*隐藏表单项组件/
FormHideItem: typeof FairysPCValtioFormHideItem;
};

`

案例

$3

`ts
import '@fairys/valtio-form-basic/esm/styles/index.css';
`

$3

`tsx
import { FairysPCValtioForm } from '@fairys/pc-valtio-form-basic';
import { Button, Input } from 'antd';
interface State {
username?: string;
"username2"?: string;
}
const Basice = () => {
const form = FairysPCValtioForm.useForm();

const onSubmit = async () => {
try {
const values = await form.validate();
console.log(values);
} catch (error) {
console.log(error);
}
};

return (


export default Basice;
`

$3

`tsx
import { FairysPCValtioForm } from '@fairys/pc-valtio-form-basic';
import { Button, Input } from 'antd';
interface State {
username?: string;
"隐藏表单项"?: string;
}

const Basice = () => {
const form = FairysPCValtioForm.useForm();

const onSubmit = async () => {
try {
const values = await form.validate();
console.log(values);
} catch (error) {
console.log(error);
}
};

return (


`

$3

`tsx
import { FairysPCValtioForm } from '@fairys/pc-valtio-form-basic';
import { Button, Input } from 'antd';

interface State {
username?: string;
}

const Cusotm = () => {
const [formState] = FairysPCValtioForm.useFormState();
return {formState.username}
}

const Basice = () => {
const form = FairysPCValtioForm.useForm();
const onSubmit = async () => {
try {
const values = await form.validate();
console.log(values);
} catch (error) {
console.log(error);
}
};

return (


export default Basice;
``