---
title: 表单联动 —— Json Schema写法（推荐）
order: 6
---

```jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { YwJsonForm } from '@ywfe/yw-design';
import 'antd/dist/antd.css';
import { Button } from 'antd'
let form = null;
const items = [
  {
    title: '控制者',
    name: 'source',
    component: 'Select',
    type: 'string',
    enum:[{value:'AAA',label:'AAA'},{value:'BBB',label:'BBB'}],
  },
  {
    title: '禁用联动',
    name: 'target1',
    component: 'Input',
    type: 'string',
  },
  {
    title: '显示隐藏联动',
    name: 'target2',
    component: 'Input',
    type: 'string',
  },
  {
    title: '赋值联动',
    name: 'target3',
    component: 'Input',
    type: 'number',
  },
  {
    title: '多条件控制',
    name: 'target4',
    component: 'Input',
    type: 'string',
  },
  {
    title: '下拉联动',
    name: 'target5',
    component: 'Select',
    type: 'string',
    enum:[{value:'AAA',label:'AAA'}],
  },
];
const linkages = [{
            type:'disabled',
            conditions:[{
                    key:'source',
                    value:'AAA'
                }],
            target:'target1',
            targetValue:true,
        },{
            type:'visible',
            conditions:[{
                    key:'source',
                    value:'AAA'
                }],
            target:'target2',
            targetValue:false,
        },{
            type:'value',
            conditions:[
                {
                    key:'source',
                    value:'AAA'
                }
            ],
            target:'target3',
            targetValue: 1,
        },{
            type:'value',
            conditions:{ "and" : [
                {"==" : [ { "var" : "source" }, 'AAA' ]},
                {">" : [ { "var" : "target3" }, 2 ] }
            ]},
            target:'target4',
            targetValue: '555',
        },
        {
            type:'enum',
            conditions:[
                {
                    key:'source',
                    value:'AAA'
                }
            ],
            target:'target5',
            targetValue: [{value:'AAA',label:'AAA'}],
        },{
            type:'enum',
            conditions:  {"!=" : [ { "var" : "source" }, 'AAA' ] },
            target:'target5',
            targetValue: [{value:'BBB',label:'BBB'}],
        }];
const App =  () => {
    return (  
        <YwJsonForm items={items} buttons={[]} linkages={linkages} />
    );
}

ReactDOM.render(<App />, mountNode);
```