快速开始

环境配置
简单案例
远程数据源加载案例
联动案例
联动校验案例

1. 环境配置#

npm install @alife/rdx-form 或者 yarn add @alife/rdx-form

2. 简单案例#

简单示例

The fallback content to display on prerendering

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

const forms = formBuilder({
  components: {
    input: (props) => {
      const { value, onChange } = props;
      return (
        <input
          value={value}
          onChange={(event) => {
            onChange(event.target.value);
          }}
        ></input>
      );
    },
  },
});
const { RdxFormRoot, FormItem } = forms<{
  city: string;
}>();

export function 简单示例() {
  return (
    <RdxFormRoot enabledStatePreview={true}>
      <FormItem type='string' componentType={'input'} name='city'></FormItem>
    </RdxFormRoot>
  );
}

3. 远程数据源加载案例#

简单示例

The fallback content to display on prerendering

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

const forms = formBuilder({
  components: {
    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>
      );
    },
  },
});

const { RdxFormRoot, FormItem } = forms<{
  city: string;
}>();
const fetchDataCompute = compute({
  id: 'fetchData',
  get: async () => {
    return (
      await axios.get(`https://rap2api.alibaba-inc.com/app/mock/4200/city`)
    ).data.data.data;
  },
});
export function 简单示例() {
  return (
    <RdxFormRoot enabledStatePreview={true}>
      <FormItem
        type='string'
        componentType={'select'}
        name='city'
        get={async ({ get }) => {
          return {
            componentProps: {
              dataSource: get(fetchDataCompute) as any,
            },
          };
        }}
      ></FormItem>
    </RdxFormRoot>
  );
}

4. 联动案例#

联动逻辑

The fallback content to display on prerendering

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

const forms = formBuilder({
  components: {
    input: (props) => {
      const { value, onChange } = props;
      return (
        <input
          value={value}
          onChange={(event) => {
            onChange(event.target.value);
          }}
        ></input>
      );
    },
    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>
      );
    },
  },
});

const { RdxFormRoot, FormItem } = forms<{
  visible: string;
  city: string;
}>();

export function 联动逻辑() {
  return (
    <RdxFormRoot enabledStatePreview={true}>
      <FormItem
        defaultValue={'show'}
        type='string'
        title={'显示开关'}
        componentType={'select'}
        name='visible'
        get={async () => {
          return {
            componentProps: {
              dataSource: [
                { label: '显示', value: 'show' },
                { label: '隐藏', value: 'hidden' },
              ],
            },
          };
        }}
      ></FormItem>
      <FormItem
        type='string'
        title={'根据显示开关进行联动'}
        get={({ get }) => {
          return {
            visible: get('visible').value === 'show',
          };
        }}
        componentType={'input'}
        name='city'
      ></FormItem>
    </RdxFormRoot>
  );
}

5. 联动校验案例#

联动逻辑

The fallback content to display on prerendering

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

const forms = formBuilder({
  components: {
    input: (props) => {
      const { value, onChange } = props;
      return (
        <input
          value={value}
          onChange={(event) => {
            onChange(event.target.value);
          }}
        ></input>
      );
    },
    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>
      );
    },
  },
});

const { RdxFormRoot, FormItem } = forms<{
  password: string;
  confirm: string;
}>();

export function 联动逻辑() {
  return (
    <RdxFormRoot enabledStatePreview={true}>
      <FormItem
        title='密码'
        type='string'
        componentType={'input'}
        name='password'
        require
      ></FormItem>
      <FormItem
        title='确认密码'
        type='string'
        componentType={'input'}
        name='confirm'
        rules={[
          ({ value, get }) => {
            return value.value !== get('password').value
              ? '两次密码输入不一致'
              : '';
          },
        ]}
        require
      ></FormItem>
    </RdxFormRoot>
  );
}