# react-mini-form

> > 此库未被babel编译

Latest version **0.0.1** (published 2019-04-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-mini-form
pnpm add react-mini-form
yarn add react-mini-form
bun add react-mini-form
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2019-04-24 |
| First published | 2019-04-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 9.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | ymblender |

## Links

- npm: https://www.npmjs.com/package/react-mini-form
- npm.io page: https://npm.io/package/react-mini-form

## Recent versions

- 0.0.1 (latest) — 2019-04-24

## README

> 此库未被babel编译

# 基于局部刷新的, 迷你的, Form 实现

## 基本使用方式

```js
// 所有值, ref, update事件, 联动对象, 都在 params 中
<Form onEvent={datas => console.log(datas)}>
  {Field => (
    <div>
      <div>我是标题</div>
      <Field defaultValue={'hello'} name="username">
        <input />
      </Field>
      <Field name="password">
        <input />
      </Field>
    </div>
  )}
</Form>
```

## 联动

```js
// 所有值, ref, update事件, 联动对象, 都在 params 中
<Form onEvent={({values, updates, name})=> {
  // 如果username包含 404, 就更新 password
  if (values.username.index('404') >= 0) {
    updates.password({
      value: '被联动修改了',
      style:{{ color:'#f00' }},
    })
  }
}}>
  {Field=>(
    <div>
      <div>我是标题</div>
      <Field defaultValue={"hello"} name="username">
        <input />
      </Field>
      <Field name="password">
        <input />
      </Field>
    </div>
  )}
</Form>
```

## 获取 Form 数据

我们在 onChange 中可以获取 Form 数据, 亦可直接传递 datas 获取 form 数据

```js
const datas = {};
const handleOnClick = () => {
  fetch('/api/xxx', { body: JSON.stringify(params.values) });
};

// 传递一个 datas, datas 必须是一个object, 它会存储 onEvent 传递的值, 可以在接下来的提交行为使用它
<Form datas={datas}>
  {Field => (
    <div>
      <div>我是标题</div>
      <Field defaultValue={'hello'} name="username">
        <input />
      </Field>
      <Field name="password">
        <input />
      </Field>
      <button onClick={handleOnClick}>提交</button>
    </div>
  )}
</Form>;
```

## 表单提交

表单提交非常简单, 将 renderProps 中 onSubmit 函数设置为触发事件即可

```js
<Form onSubmit={(datas, event)=> console.log(datas, event)}>
  {(Field, onSubmit) => (
    <div>
      <div>我是标题</div>
      <Field defaultValue={'hello'} name="username">
        <input />
      </Field>
      <Field name="password">
        <input />
      </Field>
      <button onClick={onSubmit}>提交</button>
    </div>
  )}
</Form>;
```

## 根据条件执行事件

```js
// refs中包含所有filed子组件的ref, 根据条件执行事件即可
<Form
  onEvent={({ value, refs }) => {
    if (value === '...') {
      refs.button.save();
    }
  }}
>
  {Field => (
    <div>
      <div>我是标题</div>
      <Field name="button">
        <Button />
      </Field>
    </div>
  )}
</Form>
```

## API

### Form API

| key     | 类型     | 说明                                                   |
| ------- | -------- | ------------------------------------------------------ |
| datas   | Object   | Form 的数据集合, 参考下表 datas                        |
| onEvent | Function | 当 Field 的事件触发时, 会进行回调, 默认事件是 onChange |
| onSubmit | Function | 当 Field 的 onSubmit 事件触发时, 会进行回调, 默认事件是 onChange |
| renderProps | [Field, onSubmit] | Field 是用于处理输入组件的组件, onSubmit 是用于触发 Form.onSubmit 的函数 |


### Field API

| key          | 类型          | 说明                                                                                |
| ------------ | ------------- | ----------------------------------------------------------------------------------- |
| keys         | Array<String> | 该 Field 会触发的值和事件, 默认为 ['value', 'onChange'], 其中第一个为值, 其他为对象 |
| name         | String        | 请确保同一个 Form 下 所有 Filed 的 name 是唯一的, Form 的数据集合                   |
| defaultValue | Any           | 默认设置给 value 的值                                                               |

### datas API

| key       | 类型                 | 说明                                                           |
| --------- | -------------------- | -------------------------------------------------------------- |
| name      | String               | 触发事件的 Field.name                                          |
| value     | Any                  | onEvent 返回的值, 如果是 DOM 对象返回的是 event.target.value   |
| values    | {[name]:value, ...}  | 由 name 和 value 组合而成的对象                                |
| ref       | React.element        | 当前触发的 React 对象                                          |
| refs      | Array<React.element> | 所有被 <Field /> 包裹的 React 对象的集合                       |
| updates   | {[name]:update}      | 每个 Field 更新子组件的函数集合, 参数会作为 Props 传递给子组件 |
| eventName | any                  | 触发 onEvent 的类型, 默认情况下为 onEvent                      |

---
_Source: https://npm.io/package/react-mini-form · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._