`<Form>`

一个适用于 ReactLynx 的无样式表单组件，提供表单上下文和收集字段值的提交基础能力。

基础用法

使用 <Form> 来管理表单状态、处理表单验证和提交

使输入框抬起以避让键盘

通过自动调整视图来防止屏幕键盘遮挡输入框

结构

<FormRoot initialValues={}>
  <FormField as="RadioGroupRoot" name="select">
    {data.map(() => (
      <Radio>
        <RadioIndicator />
      </Radio>
    ))}
  </FormField>

  <FormField as="Input" name="input1" />
  <FormField as="Input" name="input2" />

  <FormSubmitButton onSubmit={handleSubmit}></FormSubmitButton>
</FormRoot>

API

FormRoot

children

iOS

Android

Harmony

类型ReactNode

表单内容

initialValues

iOS

Android

Harmony

类型Record

表单字段的初始值

onChanged

iOS

Android

Harmony

类型(values: Record) => void

任意字段值变化时触发的回调函数，接收整个表单的数据

onSubmit

iOS

Android

Harmony

类型(values: Record) => void

表单提交时触发的回调函数

FormField

iOS

Android

Harmony

类型Input | RadioGroupRoot | Checkbox | TextArea | Switch

指定渲染的组件类型

children

iOS

Android

Harmony

类型ReactNode

表单字段的子节点，通常用于标签或复杂结构

className

iOS

Android

Harmony

类型string

类名

confirmType

iOS

Android

Harmony

类型send | search | go | done | next·默认值'send'

输入框确认按钮类型

iOS

Android

Harmony

类型string·默认值'input'

输入框 id

inputFilter

iOS

Android

Harmony

类型string

输入框内容过滤正则表达式

maxLength

iOS

Android

Harmony

类型number·默认值140

输入框最大长度

name

iOS

Android

Harmony

类型string

表单字段的唯一标识符

onBlur

iOS

Android

Harmony

类型(value: string) => void

输入框失焦事件

onChanged

iOS

Android

Harmony

类型(value: unknown) => void

当前字段值变化时触发的回调函数

onConfirm

iOS

Android

Harmony

类型(value: string) => void

输入框确认按钮点击事件

onFocus

iOS

Android

Harmony

类型(value: string) => void

输入框聚焦事件

onSelectionChange

iOS

Android

Harmony

类型(selectionStart: number, selectionEnd: number) => void

输入框选择范围改变事件

placeholder

iOS

Android

Harmony

类型string

输入框占位符

readonly

iOS

Android

Harmony

类型boolean·默认值false

输入框是否可交互

ref

类型ForwardedRef

showSoftInputOnFocus

iOS

Android

Harmony

类型boolean·默认值true

输入框是否聚焦时显示软键盘

style

iOS

Android

Harmony

类型CSSProperties

样式

type

iOS

Android

Harmony

输入框内容类型

disabled

iOS

Android

Harmony

类型boolean·默认值false

如果设置为 true，RadioGroup 将不能接受交互。

checkboxProps

iOS

Android

类型ViewProps

Checkbox 支持将原始视图属性直接展开到这个属性中。

indeterminate

iOS

Android

类型boolean·默认值false

是否为不确定状态。

bounces

iOS

类型boolean·默认值true

输入框是否开启 iOS bounces 效果

lineSpacing

iOS

Android

类型number | px | rpx

输入框行间距

maxLines

iOS

Android

Harmony

类型number·默认值40

输入框最大输入行数

switchProps

iOS

Android

类型ViewProps

Switch 支持将原始视图属性直接展开到这个属性中。

FormSubmitButton

buttonProps

iOS

Android

Harmony

类型ViewProps

按钮支持将原始视图属性直接展开到这个属性中。

className

iOS

Android

Harmony

类型string

类名

disabled

iOS

Android

Harmony

类型boolean·默认值false

决定按钮是否被禁用。

onSubmit

iOS

Android

Harmony

类型(values: Record) => void

提交按钮点击后，在表单内部提交逻辑执行后触发的回调函数

style

iOS

Android

Harmony

类型CSSProperties

样式

children

iOS

Android

Harmony

类型| ReactNode | ((state: {active: boolean, disabled: boolean}) => ReactNode)

子组件

基于状态的样式与渲染

该组件将每一项内部状态通过两条等价通道同时对外暴露，下表逐行给出两者的对应关系：

CSS className：根节点上会动态加上 ui-<state> 形式的类名，可直接用 .ui-<state> { ... } 选择器定制样式；
Render-prop 字段：当 children 传入函数时，同一个状态会以 children({ <state>: boolean, ... }) 的形式作为参数传入，便于在运行时做条件渲染。

ui-active

Render Propactive·类型boolean

按钮当前是否处于按下态（且未被禁用）。当 status.active 为 true 时生效，可用于 `.ui-active { ... }`。

ui-disabled

Render Propdisabled·类型boolean

按钮是否处于禁用态。当 status.disabled 为 true 时生效，可用于 `.ui-disabled { ... }`。

#<Form>

#基础用法

#使输入框抬起以避让键盘

#结构

#API

#FormRoot

#FormField

#FormSubmitButton

基于状态的样式与渲染

`<Form>`

基础用法

使输入框抬起以避让键盘

结构

API

FormRoot

FormField

FormSubmitButton