此库未被babel编译

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

基本使用方式

// 所有值, 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>

联动

// 所有值, 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 数据

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 函数设置为触发事件即可

<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>;

根据条件执行事件

// 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	该 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>	所有被 包裹的 React 对象的集合
updates	{[name]:update}	每个 Field 更新子组件的函数集合, 参数会作为 Props 传递给子组件
eventName	any	触发 onEvent 的类型, 默认情况下为 onEvent