# form-x

## 注意

`react-icecream/form-x` 提供了 formstate-x v2.x 与 react-icecream 的绑定。formstate-x v3.x 与 react-icecream 的绑定将会通过独立的包 [react-icecream-form](../../../react-icecream-form/) 来提供

---

集成 formstate-x & 提交逻辑的表单

`form-x` 在 react-icecream `Form` 的基础上：

1. 提供 `Form` 的封装后版本，内置了表单提交的校验逻辑
2. 提供 `FormItem` 的封装后版本，可以省略校验状态信息或 state 实例
3. 提供各输入组件（`TextInput`、`Select` 等）的封装后版本，接受传入 `FieldState` 实例
4. 提供了用于构造表单状态的 hook `useFormstateX`

如 3 中提到的，`form-x` 模块对所有 react-icecream 内置的输入组件进行了适配，使其支持直接传入 `FieldState` 实例，而不是通过 `value` / `onChange` 来绑定输入；除此之外，适配后的输入组件可以被 `form-x`（如 2 中所述）提供的 `FormItem` 感知到，因此在搭配使用 `FormItem` 与输入组件时（二者一一对应），可以省略将 `FieldState` 实例手动传递给 `FormItem` 的行为；即可以写为：

```tsx | pure
import { FormItem, TextInput } from 'react-icecream/form-x'

// 这里 `FormItem` 会自动去使用内容中仅有的那个输入组件（`TextInput`）所对应的 state
<FormItem>
  <TextInput state={state} />
</FormItem>
```

## 简单的字段输入场景

<code src="./demos/field.tsx"></code>

## 较复杂表单实现

<code src="./demos/index.tsx"></code>

## 列表输入与校验

<code src="./demos/list.tsx"></code>

## 支持新建或编辑的表单组件

<code src="./demos/edit.tsx"></code>

## 在展示/编辑状态间切换的表单

<code src="./demos/display-edit.tsx"></code>

## 自定义输入组件

在项目中，往往会存在自定义的输入组件。如果希望这部分组件也像 `form-x` 提供的输入组件一样，可以被 `FormItem` 感知到，可以使用 `form-x` 提供的 hook `useStateInFormItem` 实现：

<code src="./demos/custom-input.tsx"></code>

注：这往往不是必须的，直接通过 `FormItem` 的 prop `state` 指定其对应的 state 实例也是常规的做法。

## 使用 `ModalForm`

form-x 也提供了 `ModalForm` & `DrawerForm` 与 formstate-x 的绑定，使用姿势跟 `Form` 类似：

<code src="./demos/modal.tsx"></code>

<API src="./index.tsx" exports='["default", "FormItem", "TextInput", "PasswordInput", "NumberInput", "TextArea", "DatePicker", "RangeDatePicker", "Select", "MultiSelect", "CheckboxGroup", "Checkbox", "RadioGroup", "Radio"]'></API>