react-mini-form v0.0.1

此库未被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

Field API

datas API