@4react/forms 中文文档教程

Question

@4react / forms

React 应用程序的即用型表单上下文和验证。

Usage

Import dependency

npm i @4react/forms

Compose fields

import { Form, FormField, FormData } from '@4react/forms'

const App = () => (
  <Form>
    <FormField name="username" accept={/^\w+$/}>
      {({ update, valid }) => <input ... />}
    </FormField>
    <FormField name="password">
      {({ update, valid }) => <input ... />}
    </FormField>
    <FormData>
      {({ values, valid }) => <button ... />}
    </FormData>
  </Form>
)

实例

API

Form

为表单提供上下文的组件。

import { Form } from '@4react/forms'

const App = () => (
  <Form>
    ...
  </Form>
)

Name	Type	Default	Description
initialValues	object	-	optional - Initial values for the form fields.

FormField

为周围表单注册新字段的组件。

import { FormField } from '@4react/forms'

...

<FormField name="email">
  {({ update, valid }) => (
    <input
      type="text"
      onChange={e => update(e.target.value)}
      style={{ borderColor: valid ? 'gray' : 'red' }}
    />
  )}
</FormField>

Name	Type	Default	Description
name	string	-	Name of the field
defaultValue	any	-	optional - Default value of the field.
accept	Function, RegExp	-	optional - If provided, this function is used to validate the value of the field. For string fields (and compatible types fields) a RegExp can be use also.
validateOn	"init", "update"	"update"	optional - Use to control which moments are take into consideration for validation. A list of values is also accepted.

该组件接受子函数，并向其提供具有以下属性的对象：

Name	Type	Description
update	Function	Required to update the value of the field.
valid	boolean	Points if last validation is passed or none is executed yet.
value	any	The stored value of the field (for controlled inputs).

FormData

检索当前表单的所有值的组件。

import { FormData } from '@4react/forms'

...

<FormData>
  {({ values, valid }) => (
    <button
      disabled={!valid}
      onClick={() => sendData(values)}
    >
      SEND DATA
    </button>
  )}
</FormData>

Name	Type	Default	Description
validate	boolean	true	optional - Used for performance issues, setting this property to false will disable automatic validation. Manual validation can be triggered by calling the validate method passed to children.

该组件接受一个子函数，并为其提供以下属性：

Name	Type	Description
values	object	Object containing all values of the form.
valid	boolean	Points if the values in all the fields are considered valid. Returns false if no validation is done yet.
validate	Function	For performance reasons it's possible to force validation only on demand. In these cases invoking this function will validate the entire form.

Hooks

除了使用上述组件之外，还可以使用以下挂钩创建自定义字段和数据使用者：

useFormField

该挂钩将注册一个具有指定名称的新字段，并返回 FormField 组件的同一组属性（请参阅 FormField）。

import { useFormField } form '@4react/forms'

const MyCustomField = ({ name }) => {
  const { update, valid } = useFormField(name)

  return <input ... />
}

Name	Type	Default	Description
name	string	-	Name of the field.
options	object	{}	optional - Object accepting all optional props of the FormField component (see FormField).

useFormData

此挂钩检索当前表单的收集值，并返回 FormData 组件的同一组属性（请参阅 FormData）。

import { useFormData } from '@4react/forms'

const MyCustomSubmit = () => {
  const { values, valid } = useFormData()

  return <button ... />
}

Name	Type	Default	Description
options	object	{}	optional - Object accepting all optional props of the FormData component (see FormData).