createFormStore(values)

通过 createFormStore 可以创建一个初始化的 store，传递给表单组件

function createFormStore: (values: Partial<GSource>):FormStore<GSource, GCompoonentPropss>

class FormStore {
  /**
   * 订阅一个或多个表单字段
   **/
  subscribe<
    GParams extends
      | TStringPathResolver<GSource>
      | TStringPathResolver<GSource>[]
  >(
    id: GParams,
    callback: (value: TSubscribeResult<GSource, GParams>) => void
  ): void
  /**
   * 取消订阅
   * */
  unsubscribe(callback: Function): void
   /**
   * 订阅所有表单的状态
   **/
   subscribeAll(callback: (v: GSource) => void): void

   /**
   * 关联表单的衍生状态，用法同useLinkFormComputeState
   * */
   useLinkFormComputeState<GPath extends TStringPathResolver<GSource>>(
    path: GPath
  ): TRdxUseStateReturn<IViewModel<TGetString<GSource, GPath>, any>>
  /**
   * 关联表单的值，用法同useLinkFormValueState
   * */
   useLinkFormValueState<GPath extends TStringPathResolver<GSource>>(
    path: GPath
  ): TRdxUseStateReturn<TGetString<GSource, GPath>>
  /**
   * 关联表单的状态，用法同useLinkFormStatusState
   * */
   useLinkFormStatusState<GPath extends TStringPathResolver<GSource>>(
    path: GPath
  ): TRdxUseStateReturn<TFormStatus<any>>
  /**
   * 设置表达的值
   * */
  setFormValue<GPath extends TStringPathResolver<GSource>>(
    id: GPath,
    newValue: TNextValue<TResult<GSource, GPath>>
  ): void
  /**
   * 设置表达的状态
   * */
   setFormStatus<GComponentType extends keyof GCompoonentPropss>(
    id: TStringPathResolver<GSource>,
    newValue: TNextValue<TFormStatus<GCompoonentPropss[GComponentType]>>
  ): void
   setFormCompute<
    GPath extends TStringPathResolver<GSource>,
    GComponentType extends keyof GCompoonentPropss
  >(
    id: TStringPathResolver<GSource>,
    newValue: TNextValue<
      IViewModel<
        TModelResult<GSource, GPath>,
        GCompoonentPropss[GComponentType]
      >
    >
  ): void
  /**
   * 校验表单的值，为null则全量校验
   * */
  async validate(
    id?: TStringPathResolver<GSource> | TStringPathResolver<GSource>[]
  ): void
}

props

values 初始化 store 的值

简单用法

初始化表单状态

The fallback content to display on prerendering

import React, { useRef } from 'react';
import { IFormComponentProps, formBuilder } from '@alife/rdx-form';

const Input = (props: IFormComponentProps<any>) => {
  const { value, onChange, preview } = props;
  if (preview) {
    return value || '暂无数据';
  }
  return (
    <input
      value={value}
      onChange={(event) => {
        onChange(event.target.value);
      }}
    ></input>
  );
};
const Select = (
  props: IFormComponentProps<{
    dataSource: { label: string; value: string }[];
  }>
) => {
  const { value, onChange, componentProps } = props;
  const { dataSource = [] } = componentProps;
  return (
    <select
      value={value}
      onChange={(event) => {
        onChange(event.target.value);
      }}
    >
      {dataSource.map((item) => (
        <option value={item.value}>{item.label}</option>
      ))}
    </select>
  );
};
// 通过注册组件，创建formBuilder
const formFn = formBuilder({
  components: {
    input: Input,
    select: Select,
  },
});
// 通过模型定义，创建带模型含义的表单
const AreaForms = formFn<{ province: string; city: string }>();
const { FormItem, RdxFormRoot, createFormStore } = AreaForms;

// 使用AreaForms构造你的业务输入表单
export const 初始化表单状态 = () => {
  const formStore = useRef(
    createFormStore({
      province: '浙江省',
      city: '杭州市',
    })
  );
  return (
    <RdxFormRoot store={formStore.current} enabledStatePreview={true}>
      <FormItem
        name='province'
        title='省份'
        type='string'
        preview={true}
        componentType={'input'}
      ></FormItem>
      <FormItem
        name='city'
        title='城市'
        type='string'
        preview={true}
        componentType={'input'}
      ></FormItem>
    </RdxFormRoot>
  );
};
// export const 作用域外部 = () => {
//   const formStore = useRef(createFormStore({
//     province: '浙江省',
//     city: '杭州市'
//   }))
//   return (
//     <RdxFormRoot store={formStore.current} enabledStatePreview={true}>
//       <FormItem
//         name='province'
//         title='省份'
//         type='string'
//         preview={true}
//         componentType={'input'}
//       ></FormItem>
//       <FormItem
//         name='city'
//         title='城市'
//         type='string'
//         preview={true}
//         componentType={'input'}
//       ></FormItem>
//     </RdxFormRoot>
//   );
// };