@8base/forms 中文文档教程
8base Forms
8base Forms 是 React Final Forms 的薄 React 包装器,可以轻松实现 8base API 实体的表单。
API
Table of Contents
Field
扩展 React.Component
Field
包装器基于 Field
来自 react-final-form
。 此组件接受 FieldProps
和其他道具,以便使用 8base 轻松实现应用程序接口。
Properties
fieldSchema
FieldSchema? The 8base API field schema.name
string? The name of field, based on the 8base API table schema.
FieldArray
扩展 React.Component
FieldArray
包装器,基于 FieldArray
来自 react-final-form-arrays
。 它接受 FieldArrayProps
作为道具。
Fieldset
扩展 React.Component
Fieldset
将关系表架构传递给子字段。
Properties
tableSchema
TableSchema? The 8base API table schema.tableSchemaName
string? The name of the 8base API table schema. This prop only works ifSchemaContext
is provided.
Form
扩展 React.Component
Form
包装器基于 Form
来自 react-final-form
。 此组件接受 FormProps
和其他 props,以便使用 8base 轻松实现应用程序接口。
Properties
tableSchema
TableSchema? The 8base API table schema.tableSchemaName
string? The name of the 8base API table schema. This prop only works ifSchemaContext
is provided.
Examples
Basic Form
import React from 'react';
import { render } from 'react-dom';
import { Form, Field } from '@8base/forms';
const TABLE_SCHEMA = {
name: 'client',
displayName: 'Client',
isSystem: false,
fields: [{
name: 'firstName',
displayName: 'First Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Vladimir',
relation: null,
}, {
name: 'lastName',
displayName: 'Last Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Putin',
relation: null,
}, {
name: 'age',
displayName: 'Age',
description: null,
fieldType: 'NUMBER',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}],
};
render(
<Form type="CREATE" onSubmit={onSubmit}>
{
({ handleSubmit }) => (
<form onSubmit={ handleSubmit }>
<Field name="firstName" component="input" />
<Field name="lastName" component="input" />
<Field name="age" component="input" />
<button type="submit">Create Client</button>
</form>
)
}
</Form>
, document.getElementById('root'));
Form with FieldArray
import React from 'react';
import { render } from 'react-dom';
import { Form, Field, FieldArray } from '@8base/forms';
const TABLE_SCHEMA = {
name: 'client',
displayName: 'Client',
isSystem: false,
fields: [{
name: 'firstName',
displayName: 'First Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Vladimir',
relation: null,
}, {
name: 'lastName',
displayName: 'Last Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Putin',
relation: null,
}, {
name: 'age',
displayName: 'Age',
description: null,
fieldType: 'NUMBER',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}, {
name: 'fieldArray',
displayName: 'FieldArray',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: true,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}],
};
render(
<Form type="CREATE" onSubmit={onSubmit}>
{
({ handleSubmit }) => (
<form onSubmit={ handleSubmit }>
<Field name="firstName" component="input" />
<Field name="lastName" component="input" />
<Field name="age" component="input" />
<FieldArray name="fieldArray">
{
React.Children.toArray(({ fields }) => (
<React.Fragment>
{
fields.map((name, index) => (
<React.Fragment>
<Field key={ name } name={ name } component="input" />
<button onClick={ () => fields.remove(index) }>Remove</button>
</React.Fragment>
))
}
<button onClick={ () => fields.push('New Field Array Item') }>Add</button>
</React.Fragment>
))
}
</FieldArray>
<button type="submit">Create Client</button>
</form>
)
}
</Form>
, document.getElementById('root'));
Multiple Forms with TableSchemaProvider
import React from 'react';
import { render } from 'react-dom';
import { Form, Field } from '@8base/forms';
import { TableSchemaProvider } from '@8base/table-schema-provider';
const SCHEMA = [{
name: 'client',
displayName: 'Client',
isSystem: false,
fields: [{
name: 'firstName',
displayName: 'First Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Vladimir',
relation: null,
}, {
name: 'lastName',
displayName: 'Last Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Putin',
relation: null,
}, {
name: 'age',
displayName: 'Age',
description: null,
fieldType: 'NUMBER',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}],
}, {
name: 'order',
displayName: 'Order',
isSystem: false,
fields: [{
name: 'name',
displayName: 'name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}, {
name: 'deliveryDate',
displayName: 'Delivery Date',
description: null,
fieldType: 'DATE',
fieldTypeAttributes: {
format: 'DATE',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}],
}];
render(
<TableSchemaProvider schema={SCHEMA}>
<Form type="CREATE" tableSchemaName="client" onSubmit={ onSubmitClient }>
{
({ handleSubmit }) => (
<form onSubmit={ handleSubmit }>
<Field name="firstName" component="input" />
<Field name="lastName" component="input" />
<Field name="age" component="input" />
<button type="submit">Create Client</button>
</form>
)
}
</Form>
<Form type="CREATE" tableSchemaName="order" onSubmit={onSubmitOrder}>
{
({ handleSubmit }) => (
<form onSubmit={ handleSubmit }>
<Field name="name" component="input" />
<Field name="deliveryDate" component="input" />
<button type="submit">Create Order</button>
</form>
)
}
</Form>
</TableSchemaProvider>
, document.getElementById('root'));
Complex form
import React from 'react';
import { render } from 'react-dom';
import { Form, Field } from '@8base/forms';
import { TableSchemaProvider } from '@8base/table-schema-provider';
const SCHEMA = [{
id: 'TABLE_SCHEMA_ID',
name: 'tableSchema',
displayName: 'Table Schema',
isSystem: false,
fields: [
{
name: 'scalar',
displayName: 'Scalar',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: false,
isUnique: false,
defaultValue: 'Scalar Default Value',
relation: null,
},
{
name: 'scalarList',
displayName: 'Scalar List',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: true,
isRequired: false,
isUnique: false,
defaultValue: 'Scalar List Default Value 1',
relation: null,
},
{
name: 'relation',
displayName: 'Relation',
description: null,
fieldType: 'RELATION',
fieldTypeAttributes: null,
isList: false,
isRequired: false,
isUnique: null,
defaultValue: null,
relation: {
id: 'RELATION_FIELD_ID_1',
relationTableName: 'RELATION_TABLE_NAME_1',
relationFieldName: 'aid',
refTable: {
id: 'RELATION_TABLE_SCHEMA_ID',
},
refFieldIsList: false,
refFieldIsRequired: true,
},
},
{
name: 'relationList',
displayName: 'RelationList',
description: null,
fieldType: 'RELATION',
fieldTypeAttributes: null,
isList: true,
isRequired: false,
isUnique: null,
defaultValue: null,
relation: {
id: 'RELATION_FIELD_ID_2',
relationTableName: 'RELATION_TABLE_NAME_2',
relationFieldName: 'aid',
refTable: {
id: 'RELATION_TABLE_SCHEMA_ID',
},
refFieldIsList: false,
refFieldIsRequired: true,
},
},
],
}, {
id: 'RELATION_TABLE_SCHEMA_ID',
name: 'relationTableSchema',
displayName: 'Relation Table Schema',
isSystem: false,
fields: [
{
name: 'scalar',
displayName: 'Scalar',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: false,
isUnique: false,
defaultValue: 'Scalar Default Value',
relation: null,
},
{
name: 'scalarList',
displayName: 'Scalar List',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: true,
isRequired: false,
isUnique: false,
defaultValue: 'Scalar List Default Value 1',
relation: null,
},
{
name: 'relation',
displayName: 'Relation',
description: null,
fieldType: 'RELATION',
fieldTypeAttributes: null,
isList: false,
isRequired: false,
isUnique: null,
defaultValue: null,
relation: {
id: 'RELATION_FIELD_ID_3',
relationTableName: 'RELATION_TABLE_NAME_1',
relationFieldName: 'aid',
refTable: {
id: 'TABLE_SCHEMA_ID',
},
refFieldIsList: false,
refFieldIsRequired: true,
},
},
{
name: 'relationList',
displayName: 'RelationList',
description: null,
fieldType: 'RELATION',
fieldTypeAttributes: null,
isList: true,
isRequired: false,
isUnique: null,
defaultValue: null,
relation: {
id: 'RELATION_FIELD_ID_4',
relationTableName: 'RELATION_TABLE_NAME_2',
relationFieldName: 'aid',
refTable: {
id: 'TABLE_SCHEMA_ID',
},
refFieldIsList: false,
refFieldIsRequired: true,
},
},
],
}];
const INITIAL_VALUES = {
scalar: 'Scalar Value',
scalarList: [
'Scalar List Value',
],
relation: {
scalar: 'Relation Scalar Value',
},
relationList: [{
scalar: 'Relation List Scalar Value',
}],
};
render(
<TableSchemaProvider value={ SCHEMA }>
<Form type="CREATE" tableSchemaName="tableSchema" initialValues={ INITIAL_VALUES } onSubmit={ onSubmitForm }>
{
({ handleSubmit }) => (
<form onSubmit={ handleSubmit }>
<Field name="scalar" component="input" />
<FieldArray name="scalarList">
{
({ fields }) => (
fields.map((name) => (
<Field key={ name } name={ name } component="input" />
))
)
}
</FieldArray>
<Fieldset tableSchemaName="relationTableSchema">
<Field name="relation.scalar" component="input" />
</Fieldset>
<FieldArray name="relationList">
{
({ fields }) => (
fields.map((name) => (
<Fieldset key={ name } tableSchemaName="relationTableSchema">
<Field name={ `${name}.scalar` } component="input" />
</Fieldset>
))
)
}
</FieldArray>
</form>
)
}
</Form>
</TableSchemaProvider>
, document.getElementById('root'));
8base Forms
8base Forms is a thin React wrapper for React Final Forms to easy implement forms for 8base API entities.
API
Table of Contents
Field
Extends React.Component
Field
wrapper based on Field
from the react-final-form
. This component accepts FieldProps
and other props for easy implementation with the 8base API.
Properties
fieldSchema
FieldSchema? The 8base API field schema.name
string? The name of field, based on the 8base API table schema.
FieldArray
Extends React.Component
FieldArray
wrapper based on FieldArray
from the react-final-form-arrays
. It accepts FieldArrayProps
as a prop.
Fieldset
Extends React.Component
Fieldset
passes relation table schema to the children fields.
Properties
tableSchema
TableSchema? The 8base API table schema.tableSchemaName
string? The name of the 8base API table schema. This prop only works ifSchemaContext
is provided.
Form
Extends React.Component
Form
wrapper based on Form
from the react-final-form
. This component accepts FormProps
and other props for easy implementation with the 8base API.
Properties
tableSchema
TableSchema? The 8base API table schema.tableSchemaName
string? The name of the 8base API table schema. This prop only works ifSchemaContext
is provided.
Examples
Basic Form
import React from 'react';
import { render } from 'react-dom';
import { Form, Field } from '@8base/forms';
const TABLE_SCHEMA = {
name: 'client',
displayName: 'Client',
isSystem: false,
fields: [{
name: 'firstName',
displayName: 'First Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Vladimir',
relation: null,
}, {
name: 'lastName',
displayName: 'Last Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Putin',
relation: null,
}, {
name: 'age',
displayName: 'Age',
description: null,
fieldType: 'NUMBER',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}],
};
render(
<Form type="CREATE" onSubmit={onSubmit}>
{
({ handleSubmit }) => (
<form onSubmit={ handleSubmit }>
<Field name="firstName" component="input" />
<Field name="lastName" component="input" />
<Field name="age" component="input" />
<button type="submit">Create Client</button>
</form>
)
}
</Form>
, document.getElementById('root'));
Form with FieldArray
import React from 'react';
import { render } from 'react-dom';
import { Form, Field, FieldArray } from '@8base/forms';
const TABLE_SCHEMA = {
name: 'client',
displayName: 'Client',
isSystem: false,
fields: [{
name: 'firstName',
displayName: 'First Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Vladimir',
relation: null,
}, {
name: 'lastName',
displayName: 'Last Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Putin',
relation: null,
}, {
name: 'age',
displayName: 'Age',
description: null,
fieldType: 'NUMBER',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}, {
name: 'fieldArray',
displayName: 'FieldArray',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: true,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}],
};
render(
<Form type="CREATE" onSubmit={onSubmit}>
{
({ handleSubmit }) => (
<form onSubmit={ handleSubmit }>
<Field name="firstName" component="input" />
<Field name="lastName" component="input" />
<Field name="age" component="input" />
<FieldArray name="fieldArray">
{
React.Children.toArray(({ fields }) => (
<React.Fragment>
{
fields.map((name, index) => (
<React.Fragment>
<Field key={ name } name={ name } component="input" />
<button onClick={ () => fields.remove(index) }>Remove</button>
</React.Fragment>
))
}
<button onClick={ () => fields.push('New Field Array Item') }>Add</button>
</React.Fragment>
))
}
</FieldArray>
<button type="submit">Create Client</button>
</form>
)
}
</Form>
, document.getElementById('root'));
Multiple Forms with TableSchemaProvider
import React from 'react';
import { render } from 'react-dom';
import { Form, Field } from '@8base/forms';
import { TableSchemaProvider } from '@8base/table-schema-provider';
const SCHEMA = [{
name: 'client',
displayName: 'Client',
isSystem: false,
fields: [{
name: 'firstName',
displayName: 'First Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Vladimir',
relation: null,
}, {
name: 'lastName',
displayName: 'Last Name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: 'Putin',
relation: null,
}, {
name: 'age',
displayName: 'Age',
description: null,
fieldType: 'NUMBER',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}],
}, {
name: 'order',
displayName: 'Order',
isSystem: false,
fields: [{
name: 'name',
displayName: 'name',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}, {
name: 'deliveryDate',
displayName: 'Delivery Date',
description: null,
fieldType: 'DATE',
fieldTypeAttributes: {
format: 'DATE',
fieldSize: 100,
},
isList: false,
isRequired: true,
isUnique: false,
defaultValue: null,
relation: null,
}],
}];
render(
<TableSchemaProvider schema={SCHEMA}>
<Form type="CREATE" tableSchemaName="client" onSubmit={ onSubmitClient }>
{
({ handleSubmit }) => (
<form onSubmit={ handleSubmit }>
<Field name="firstName" component="input" />
<Field name="lastName" component="input" />
<Field name="age" component="input" />
<button type="submit">Create Client</button>
</form>
)
}
</Form>
<Form type="CREATE" tableSchemaName="order" onSubmit={onSubmitOrder}>
{
({ handleSubmit }) => (
<form onSubmit={ handleSubmit }>
<Field name="name" component="input" />
<Field name="deliveryDate" component="input" />
<button type="submit">Create Order</button>
</form>
)
}
</Form>
</TableSchemaProvider>
, document.getElementById('root'));
Complex form
import React from 'react';
import { render } from 'react-dom';
import { Form, Field } from '@8base/forms';
import { TableSchemaProvider } from '@8base/table-schema-provider';
const SCHEMA = [{
id: 'TABLE_SCHEMA_ID',
name: 'tableSchema',
displayName: 'Table Schema',
isSystem: false,
fields: [
{
name: 'scalar',
displayName: 'Scalar',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: false,
isUnique: false,
defaultValue: 'Scalar Default Value',
relation: null,
},
{
name: 'scalarList',
displayName: 'Scalar List',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: true,
isRequired: false,
isUnique: false,
defaultValue: 'Scalar List Default Value 1',
relation: null,
},
{
name: 'relation',
displayName: 'Relation',
description: null,
fieldType: 'RELATION',
fieldTypeAttributes: null,
isList: false,
isRequired: false,
isUnique: null,
defaultValue: null,
relation: {
id: 'RELATION_FIELD_ID_1',
relationTableName: 'RELATION_TABLE_NAME_1',
relationFieldName: 'aid',
refTable: {
id: 'RELATION_TABLE_SCHEMA_ID',
},
refFieldIsList: false,
refFieldIsRequired: true,
},
},
{
name: 'relationList',
displayName: 'RelationList',
description: null,
fieldType: 'RELATION',
fieldTypeAttributes: null,
isList: true,
isRequired: false,
isUnique: null,
defaultValue: null,
relation: {
id: 'RELATION_FIELD_ID_2',
relationTableName: 'RELATION_TABLE_NAME_2',
relationFieldName: 'aid',
refTable: {
id: 'RELATION_TABLE_SCHEMA_ID',
},
refFieldIsList: false,
refFieldIsRequired: true,
},
},
],
}, {
id: 'RELATION_TABLE_SCHEMA_ID',
name: 'relationTableSchema',
displayName: 'Relation Table Schema',
isSystem: false,
fields: [
{
name: 'scalar',
displayName: 'Scalar',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: false,
isRequired: false,
isUnique: false,
defaultValue: 'Scalar Default Value',
relation: null,
},
{
name: 'scalarList',
displayName: 'Scalar List',
description: null,
fieldType: 'TEXT',
fieldTypeAttributes: {
format: 'UNFORMATTED',
fieldSize: 100,
},
isList: true,
isRequired: false,
isUnique: false,
defaultValue: 'Scalar List Default Value 1',
relation: null,
},
{
name: 'relation',
displayName: 'Relation',
description: null,
fieldType: 'RELATION',
fieldTypeAttributes: null,
isList: false,
isRequired: false,
isUnique: null,
defaultValue: null,
relation: {
id: 'RELATION_FIELD_ID_3',
relationTableName: 'RELATION_TABLE_NAME_1',
relationFieldName: 'aid',
refTable: {
id: 'TABLE_SCHEMA_ID',
},
refFieldIsList: false,
refFieldIsRequired: true,
},
},
{
name: 'relationList',
displayName: 'RelationList',
description: null,
fieldType: 'RELATION',
fieldTypeAttributes: null,
isList: true,
isRequired: false,
isUnique: null,
defaultValue: null,
relation: {
id: 'RELATION_FIELD_ID_4',
relationTableName: 'RELATION_TABLE_NAME_2',
relationFieldName: 'aid',
refTable: {
id: 'TABLE_SCHEMA_ID',
},
refFieldIsList: false,
refFieldIsRequired: true,
},
},
],
}];
const INITIAL_VALUES = {
scalar: 'Scalar Value',
scalarList: [
'Scalar List Value',
],
relation: {
scalar: 'Relation Scalar Value',
},
relationList: [{
scalar: 'Relation List Scalar Value',
}],
};
render(
<TableSchemaProvider value={ SCHEMA }>
<Form type="CREATE" tableSchemaName="tableSchema" initialValues={ INITIAL_VALUES } onSubmit={ onSubmitForm }>
{
({ handleSubmit }) => (
<form onSubmit={ handleSubmit }>
<Field name="scalar" component="input" />
<FieldArray name="scalarList">
{
({ fields }) => (
fields.map((name) => (
<Field key={ name } name={ name } component="input" />
))
)
}
</FieldArray>
<Fieldset tableSchemaName="relationTableSchema">
<Field name="relation.scalar" component="input" />
</Fieldset>
<FieldArray name="relationList">
{
({ fields }) => (
fields.map((name) => (
<Fieldset key={ name } tableSchemaName="relationTableSchema">
<Field name={ `${name}.scalar` } component="input" />
</Fieldset>
))
)
}
</FieldArray>
</form>
)
}
</Form>
</TableSchemaProvider>
, document.getElementById('root'));