@ formio/ 反应

用于根据 表格.io 平台.

正式文件

最新文件、发布资料和指南一律参考本文中提供的官方表格:

https://help.form.io (英语)

安装

无

npm install @formio/react --save
npm install @formio/js --save

线条

yarn add @formio/react @formio/js

使用 Vite( 注: 当使用像 Next.js 或 Create React App 这样的框架时, 不需要额外的 Vite 配置)

当使用 @formio/ resact 在 Vite 创建的工程中( 特别是针对 React 18 和 19) 时, 请确保您安装 @ vitejs/ plugin- react 软件包并在您的 vite 中配置 。 配置.js文件.

安装 Vite 反应插件

yarn add --dev @vitejs/plugin-react

在您的 vite.config.js 中,添加反应插件 :

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
});

钩子

使用Formio Context

向您的 React 组件提供全局Formio 上下文值的钩子 . 调用组件 useFormioContext 一定是一个孩子 <FormioProvider /> 组件.

返回值

useFormioContext 返回具有下列参数的对象:

实例

使用由 useFormioContext 以评价用户的表单.io认证:

import { createRoot } from 'react-dom/client';
import { useFormioContext, FormGrid, FormioProvider } from '@formio/react';

const App = () => {
    const { isAuthenticated } = useFormioContext();

    return isAuthenticated ? (
        <Router>
            <Route path="/form">
                <FormGrid
                    formQuery={{ type: 'form' }}
                    onFormClick={(id) => setLocation(`/form/${id}`)}
                />
            </Route>
            <Route path="/resource">
                <FormGrid
                    formQuery={{ type: 'resource' }}
                    onFormClick={(id) => setLocation(`/resource/${id}`)}
                />
            </Route>
        </Router>
    ) : (
        <Redirect to="/login" />
    );
};

const domNode = document.getElementById('root');
const root = createRoot(domNode);
root.render(
    <FormioProvider projectUrl="https://examples.form.io">
        <App />
    </FormioProvider>,
);

使用 表格.io SDK 与 Form.io 服务器交互:

import { createRoot } from 'react-dom/client';
import { useEffect, useState } from 'react';
import {
    useFormioContext,
    FormioProvider,
    FormType,
    Form,
} from '@formio/react';

const FormsByUser = ({ userId }: { userId: string }) => {
    const { Formio, projectUrl } = useFormioContext();
    const [forms, setForms] = useState<FormType[]>([]);

    useEffect(() => {
        const fetchForms = async () => {
            const formio = new Formio(projectUrl);
            try {
                const forms = await formio.loadForms({
                    params: { type: 'form', owner: userId },
                });
                setForms(forms);
            } catch (err) {
                console.log(
                    `Error while loading forms for user ${userId}:`,
                    err,
                );
            }
        };
        fetchForms();
    }, [Formio, projectUrl, userId]);

    return forms.map(function (form) {
        return (
            <>
                <Form src={form} />
                <div style={{ marginBottom: '10px' }} />
            </>
        );
    });
};

const domNode = document.getElementById('root');
const root = createRoot(domNode);
const root = createRoot();
root.render(
    <FormioProvider projectUrl="https://examples.form.io">
        <App />
    </FormioProvider>,
);

图片

向您的 React 组件提供限制/ skip 服务器 pagination 数据和方法的钩头 . 调用组件 usePagination 一定是一个孩子 <FormioProvider /> 组件.

道具

返回值

usePagination 返回具有下列参数的对象:

实例

贴出一组表格 :

import { createRoot } from 'react-dom/client';
import { useCallback } from 'react';
import {
    useFormioContext,
    FormioProvider,
    FormType,
    Form,
} from '@formio/react';

const FormsByUser = ({ userId }: { userId: string }) => {
    const { Formio, projectUrl } = useFormioContext();
    const fetchFunction = useCallback(
        (limit: number, skip: number) => {
            const formio = new Formio(`${projectUrl}/form`);
            return formio.loadForms({ params: { type: 'form', limit, skip } });
        },
        [Formio, projectUrl],
    );
    const { data, page, nextPage, prevPage, hasMore } = usePagination<FormType>(
        1,
        10,
        fetchFunction,
    );

    return (
        <div>
            <div>
                {data.map((form) => (
                    <>
                        <Form src={form} />
                        <div style={{ marginBottom: '10px' }} />
                    </>
                ))}
            </div>
            <ul>
                <li
                    onClick={prevPage}
                    className={`${page === 1 ? 'disabled' : ''}`}
                >
                    Prev
                </li>
                <li
                    onClick={nextPage}
                    className={`${hasMore ? '' : 'disabled'}`}
                >
                    Next
                </li>
            </ul>
        </div>
    );
};

const domNode = document.getElementById('root');
const root = createRoot(domNode);
const root = createRoot();
root.render(
    <FormioProvider projectUrl="https://examples.form.io">
        <App />
    </FormioProvider>,
);

构成部分

福尔米奥提供

使用此库中的一些钩和组件时需要的回放上下文提供者组件 .

道具

实例

从您自主机 Form.io 部署中生成一个简单的表格 :

import { createRoot } from 'react-dom/client';
import { Form, FormioProvider } from '@formio/react';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

root.render(
  <FormioProvider baseUrl="https://myformiodeployment.example.com/" projectUrl="https://myformiodeployment.example.com/myproject">
    <Form src="https://myformiodeployment.example.com/myproject/myexampleform" />
  </FormioProvider>
);

扩展Formio对象以使用外部模块 :

import { createRoot } from 'react-dom/client';
import { Form, FormioProvider } from '@formio/react';
import { Formio } from '@formio/js';
import premium from '@formio/premium';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

Formio.use(premium);
root.render(
  <FormioProvider Formio={Formio}>
    <Form src="https://myproject.form.io/myformwithpremiumcomponents" />
  </FormioProvider>
);

表单

反光组件包装 a 形式.io形式。可以使用 JSON 格式定义或 Form.io 格式 URL,并在您的 React 应用程序中制作格式.

道具

实例

从表格.io SaaS中生成一个简单的形式:

import { createRoot } from 'react-dom/client';
import { Form } from '@formio/react';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

root.render(
    <Form src="https://example.form.io/example" onSubmit={console.log} />,
);

从 JSON 形式定义中生成一个简单的形式 :

import { createRoot } from 'react-dom/client';
import { Form } from '@formio/react';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

const formDefinition = {
    type: "form",
    display: "form",
    components: [
        {
            type: "textfield"
            key: "firstName",
            label: "First Name",
            input: true,
        },
        {
            type: "textfield"
            key: "firstName",
            label: "First Name",
            input: true,
        },
        {
            type: "button",
            key: "submit",
            label: "Submit",
            input: true
        }
    ]
}

root.render(<Form src={formDefinition} />);

访问基础形式实例(见 这里 详细情况:

import { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { Form } from '@formio/react';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

const formDefinition = {
    type: "form",
    display: "form",
    components: [
        {
            type: "textfield"
            key: "firstName",
            label: "First Name",
            input: true,
        },
        {
            type: "textfield"
            key: "firstName",
            label: "First Name",
            input: true,
        },
        {
            type: "button",
            key: "submit",
            label: "Submit",
            input: true
        }
    ]
}

const App = () => {
    const formInstance = useRef(null);

    const handleFormReady = (instance) => {
        formInstance.current = instance;
    }

    const handleClick = () => {
        if (!formInstance.current) {
            console.log("Our form isn't quite ready yet.");
            return;
        }
        formInstance.current.getComponent('firstName')?.setValue('John');
        formInstance.current.getComponent('lastName')?.setValue('Smith');
    }

    return (
        <div>
            <Form src={formDefinition} onFormReady={handleFormReady} />
            <button type="button" onClick={handleClick}>Set Names</button>
        </div>
    );
}

root.render(<App />);

下一个. js 的使用

A. 《公约》的一些依赖性 @formio/js 依赖 Web API 和浏览器专用全域像 window。因为 Next.js 包含服务器侧渲染阶段,所以即使用于 客户端组件因此,我们建议使用 Next.js 动态导入表单组件 dynamic API : (英语)

'use client';
import dynamic from 'next/dynamic';
import { Webform } from '@formio/js';

const Form = dynamic(
    () => import('@formio/react').then((module) => module.Form),
    { ssr: false },
);

export default function Home() {
    const formInstance = useRef<Webform | null>(null);

    const handleClick = () => {
        if (!formInstance.current) {
            console.log("Our form isn't quite ready yet.");
            return;
        }
        formInstance.current.getComponent('firstName')?.setValue('John');
        formInstance.current.getComponent('lastName')?.setValue('Smith');
    };

    return (
        <main className={styles.main}>
            <Form
                form="https://examples.form.io/example"
                onFormReady={(instance) => {
                    formInstance.current = instance;
                }}
            />
            <button onClick={handleClick}>Set Names</button>
        </main>
    );
}

窗体构建器

反光组件包装 a.io 窗体构建器。可以在您的 React 应用程序中创建窗体构建器.

道具

实例

以空白形式绘制简单的窗体构建器 :

import { createRoot } from 'react-dom/client';
import { FormBuilder } from '@formio/react';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

root.render(
    <FormBuilder />,
);

绘制一个初始形式定义的构建者 :

import { createRoot } from 'react-dom/client';
import { FormBuilder } from '@formio/react';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

const formDefinition = {
    display: "form",
    components: [
        {
            type: "textfield"
            key: "firstName",
            label: "First Name",
            input: true,
        },
        {
            type: "textfield"
            key: "firstName",
            label: "First Name",
            input: true,
        },
        {
            type: "button",
            key: "submit",
            label: "Submit",
            input: true
        }
    ]
}

root.render(<FormBuilder form={formDefinition} />);

访问基础窗体构建器实例(参见 这里 详细情况:

import { useRef } from 'react';
import { createRoot } from 'react-dom/client';
import { FormBuilder } from '@formio/react';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

const formDefinition = {
    display: "form",
    components: [
        {
            type: "textfield"
            key: "firstName",
            label: "First Name",
            input: true,
        },
        {
            type: "textfield"
            key: "firstName",
            label: "First Name",
            input: true,
        },
        {
            type: "button",
            key: "submit",
            label: "Submit",
            input: true
        }
    ]
}

const App = () => {
    const formBuilderInstance = useRef(null);

    const handleFormReady = (instance) => {
        formBuilderInstance.current = instance;
    }

    const handleClick = () => {
        if (!formBuilderInstance.current) {
            console.log("Our form isn't quite ready yet.");
            return;
        }
        console.log("Here's our builder instance:", formBuilderInstance.current);
    }

    return (
        <div>
            <Form src={formDefinition} onFormReady={handleFormReady} />
            <button type="button" onClick={handleClick}>Log Our Builder</button>
        </div>
    );
}

root.render(<App />);

窗体编辑

FormEdit组件将FormBuilder组件包起来并添加了设置窗体,允许与Form.io服务器之间直接交互. 这个 FormEdit 组件必须是 <FormioProvider /> 组件.

道具

样式

FormEdit 使用一个 components 包含每个“元素”的道具 FormEdit 组件,允许您输入自己的标记和样式。 这是它的类型:

type ComponentProp<T = object> = (props: T) => JSX.Element;
type Components = {
    Container?: ComponentProp<{ children: ReactNode }>;
    SettingsFormContainer?: ComponentProp<{ children: ReactNode }>;
    BuilderContainer?: ComponentProp<{ children: ReactNode }>;
    SaveButtonContainer?: ComponentProp<{ children: ReactNode }>;
    SaveButton?: ComponentProp<{
        onClick: () => void;
    }>;
};

实例

装入简单 FormEdit 从 Form.io 服务器上装入窗体的组件:

import { createRoot } from 'react-dom/client';
import { useState, useEffect } from 'react';
import {
    FormGrid,
    FormioProvider,
    useFormioContext,
    FormType,
} from '@formio/react';

const App = () => {
    const { Formio, projectUrl } = useFormioContext();
    const [form, setForm] = useState<FormType | undefined>();

    useEffect(() => {
        const fetchForm = async () => {
            try {
                const formio = new Formio(`${projectUrl}/example`);
                const form = await formio.loadForm();
                setForm(form);
            } catch (err) {
                console.log('Error while fetching form:', err);
            }
        };
    }, [Formio, projectUrl]);

    return form ? (
        <FormEdit
            initialForm={form}
            onSaveForm={() => console.log('Form saved to my Form.io server!')}
        />
    ) : null;
};
const domNode = document.getElementById('root');
const root = createRoot(domNode);

root.render(
    <FormioProvider projectUrl="https://examples.form.io">
        <App />
    </FormioProvider>,
);

将自己的标记和样式输入组件:

import { createRoot } from 'react-dom/client';
import { useState, useEffect } from 'react';
import {
    FormEdit,
    FormioProvider,
    useFormioContext,
    FormType,
} from '@formio/react';

const App = ({ name }: { name: string }) => {
    const { Formio, projectUrl } = useFormioContext();
    const [form, setForm] = useState<FormType | undefined>();

    useEffect(() => {
        const fetchForm = async () => {
            try {
                const formio = new Formio(`${projectUrl}/example`);
                const form = await formio.loadForm();
                setForm(form);
            } catch (err) {
                console.log('Error while fetching form:', err);
            }
        };
    }, [Formio, projectUrl]);

    return form ? (
        <FormEdit
            initialForm={form}
            onSaveForm={() => console.log('Form saved to my Form.io server!')}
            components={{
                SaveButtonContainer: ({ children }) => (
                    <div
                        className="save-form-bar button-wrap"
                        style={{ justifyContent: 'end' }}
                    >
                        {children}
                    </div>
                ),
                SaveButton: ({ onClick }) => (
                    <button className="button save-form" onClick={onClick}>
                        Save {name}
                    </button>
                ),
            }}
        />
    ) : null;
};
const domNode = document.getElementById('root');
const root = createRoot(domNode);

root.render(
    <FormioProvider projectUrl="https://examples.form.io">
        <App name="Form" />
    </FormioProvider>,
);

窗体图形

FormGrid组件可用于制作表格列表,每行都有一组动作. 这个 FormGrid 组件必须是 <FormioProvider /> 组件.

道具

样式

FormGrid 使用一个 components 包含每个“元素”的道具 FormGrid 组件,允许您输入自己的标记和样式。 这是它的类型:

type ComponentProp<T = object> = (props: T) => JSX.Element;
type Components = {
    Container?: ComponentProp<{ children: ReactNode }>;
    FormContainer?: ComponentProp<{ children: ReactNode }>;
    FormNameContainer?: ComponentProp<{
        children: ReactNode;
        onClick?: () => void;
    }>;
    FormActionsContainer?: ComponentProp<{ children: ReactNode }>;
    FormActionButton?: ComponentProp<{
        action: Action;
        onClick: () => void;
    }>;
    PaginationContainer?: ComponentProp<{ children: ReactNode }>;
    PaginationButton?: ComponentProp<{
        children: ReactNode;
        isActive?: boolean;
        disabled?: boolean;
        onClick: () => void;
    }>;
};

实例

装入从 Form.io 服务器获取窗体的简单窗体网格(通过 <FormioProvider /> 组件 :

import { createRoot } from 'react-dom/client';
import { FormGrid, FormioProvider } from '@formio/react';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

root.render(
    <FormioProvider projectUrl="https://examples.form.io">
        <FormGrid formQuery={{ type: 'form' }} />
    </FormioProvider>,
);

将自己的标记和样式输入组件:

import { FormGridProps, FormGrid } from '@formio/react';
import { createRoot } from 'react-dom/client';

const Container: FormGridComponentProps['Container'] = ({ children }) => (
    <div className="panel">{children}</div>
);

const FormContainer: FormGridComponentProps['FormContainer'] = ({
    children,
}) => (
    <div className={`item-wrap form`}>
        <button className="item">{children}</button>
    </div>
);

const FormNameContainer: FormGridComponentProps['FormNameContainer'] = ({
    children,
    onClick,
}) => {
    return (
        <div className="item-title" onClick={onClick}>
            <img src={`icon-form.svg`} alt={`${type} icon`} />
            {children}
        </div>
    );
};

const FormActionsContainer: FormGridComponentProps['FormActionsContainer'] = ({
    children,
}) => <div className="item-buttons">{children}</div>;

const FormActionButton: FormGridComponentProps['FormActionButton'] = ({
    action,
    onClick,
}) => (
    <a
        className={`btn ${action && action.name === 'Edit' ? 'edit' : 'trash'}`}
        onClick={onClick}
    >
        <i
            className={`${action && action.name === 'Edit' ? 'ri-edit-box-line' : 'ri-delete-bin-line'}`}
        ></i>{' '}
        {action && action.name === 'Edit' ? 'Edit' : ''}
    </a>
);

const PaginationContainer: FormGridComponentProps['PaginationContainer'] = ({
    children,
}) => <div className="pagination-buttons">{children}</div>;

const PaginationButton: FormGridComponentProps['PaginationButton'] = ({
    isActive,
    disabled,
    children,
    onClick,
}) => (
    <a
        className={`pagination-btn${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
        onClick={onClick}
    >
        {children}
    </a>
);

export const MyFormGrid = () => {
    return (
        <FormGrid
            formQuery={{ type: 'form' }}
            onFormClick={(id) => console.log(`Form with id ${id} clicked!`)}
            components={{
                Container,
                FormContainer,
                FormNameContainer,
                FormActionsContainer,
                FormActionButton,
                PaginationContainer,
                PaginationButton,
            }}
        />
    );
};

const domNode = document.getElementById('root');
const root = createRoot(domNode);

root.render(
    <FormioProvider projectUrl="https://examples.form.io">
        <MyFormGrid />
    </FormioProvider>,
);

提交图像

PresentGrid 组件可用于制作表格列表,每行都有一组动作. 这个 SubmissionGrid 组件必须是 <FormioProvider /> 组件.

道具

样式

SubmissionGrid 使用一个 components 包含每个成分“元素”的道具 SubmissionGrid 组件,允许您输入自己的标记和样式。 这是它的类型:

type ComponentProp<T = object> = (props: T) => JSX.Element;
type Components = {
    Container?: ComponentProp<{ children: ReactNode }>;
    TableContainer?: ComponentProp<{ children: ReactNode }>;
    TableHeadContainer?: ComponentProp<{ children: ReactNode }>;
    TableHeadCell?: ComponentProp<{ children: ReactNode }>;
    TableBodyRowContainer?: ComponentProp<{
        children: ReactNode;
        onClick?: () => void;
    }>;
    TableHeaderRowContainer?: ComponentProp<{ children: ReactNode }>;
    TableBodyContainer?: ComponentProp<{ children: ReactNode }>;
    TableCell?: ComponentProp<{ children: ReactNode }>;
    PaginationContainer?: ComponentProp<{ children: ReactNode }>;
    PaginationButton?: ComponentProp<{
        children: ReactNode;
        isActive?: boolean;
        disabled?: boolean;
        onClick: () => void;
    }>;
};

实例

装入从 Form.io 服务器获取窗体的简单提交网格(通过 <FormioProvider /> 组件 :

import { createRoot } from 'react-dom/client';
import { SubmissionGrid, FormioProvider } from '@formio/react';

const domNode = document.getElementById('root');
const root = createRoot(domNode);

root.render(
    <FormioProvider projectUrl="https://examples.form.io">
        <SubmissionGrid formId="57aa1d2a5b7a477b002717fe" />
    </FormioProvider>,
);

将自己的标记和样式输入组件:

import { SubmissionGridProps, SubmissionGrid } from '@formio/react';
import { createRoot } from 'react-dom/client';

const components: SubmissionTableProps['components'] = {
    Container: ({ children }) => <div className="table-wrap">{children}</div>,
    TableContainer: ({ children }) => (
        <div className="table remember-focus-table">{children}</div>
    ),
    TableHeadContainer: ({ children }) => <div>{children}</div>,
    TableHeaderRowContainer: ({ children }) => (
        <div className="trow heading">{children}</div>
    ),
    TableHeadCell: ({ children }) => <div className="tcol">{children}</div>,
    TableBodyRowContainer: ({ children, onClick }) => (
        <div className="trow entry" onClick={onClick}>
            {children}
        </div>
    ),
    TableBodyContainer: ({ children }) => <div>{children}</div>,
    TableCell: ({ children }) => <div className="tcol">{children}</div>,
    PaginationContainer: ({ children }) => (
        <div className="table-pagination">
            <div className="table-pagination-controls">{children}</div>
        </div>
    ),
    PaginationButton: ({ children, isActive, onClick, disabled }) => (
        <a
            className={`pagination-btn${isActive ? ' active' : ''}${disabled ? ' disabled' : ''}`}
            onClick={onClick}
        >
            {children}
        </a>
    ),
};

export const MySubmissionGrid = ({ id }: { id: string }) => {
    return (
        <SubmissionGrid
            onSubmissionClick={(id) =>
                console.log(`Submission with id ${id} clicked!`)
            }
            components={components}
            formId={id}
        />
    );
};

const domNode = document.getElementById('root');
const root = createRoot(domNode);

root.render(
    <FormioProvider projectUrl="https://examples.form.io">
        <MySubmissionGrid id="57aa1d2a5b7a477b002717fe" />
    </FormioProvider>,
);

模块

模块包含Redux动作,还原器,常数和选择器来简化对形式.io表单的API请求. 减少器、动作和选择器都有名字。 这提供了命名空间,所以相同的动作和还原器可以在同一redux状态内被再用.

根号

根模块是其他模块,如所选的Root选择器共享的事物的容器.

选择器

认证

认证模块旨在方便用户在反应内使用表单.io登录系统进行登录,注册和认证.

递减器

行动

表单

形式模块用于与单一形式互动.

递减器

行动

选择器

表单

形式模块处理多种形式,如形式列表.

递减器

行动

选择器

提交日期

提交模块用于与单一提交书互动.

递减器

行动

选择器

提交的材料

提交书模块处理多种提交书的形式,如提交书清单.

递减器

行动

选择器

许可证

释放 MIT 许可证。 。 。 .