---
title: 复杂联动写法
order: 9
---

```jsx
import React, { Component, useEffect } from 'react';
import ReactDOM from 'react-dom';
import { YwJsonForm, YwTitle } from '@ywfe/yw-design';
import 'antd/dist/antd.css';
const items = [
  {
    title: '控制者',
    name: 'type',
    component: 'Select',
    enum: [
      { value: 1, label: 'AAA' },
      { value: 2, label: 'BBB' },
    ],
  },
  {
    title: '异步下拉数据',
    name: 'asyncValue',
    component: 'Select',
    reactions: '{{getAsyncDataSource}}',
  },
];

const getAsyncDataSource = (field) => {
  const type = field.query('type').take(1).value;
  if (!type) return;
  field.loading = true;
  setTimeout(() => {
    select.loading = false;
    const dataSource = type === 1 ? [{ value: 1, label: 'AAA' }] : [{ value: 2, label: 'BBB' }];
    field.setDataSource(dataSource);
    field.setValue(type);
    field.loading = false;
  }, 1000);
};
const App = () => {
  return (
    <div>
      <YwTitle text="异步联动" size="m" />
      <YwJsonForm items={items} schemaScope={{ getAsyncDataSource }} />
    </div>
  );
};

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

主动联动

```json
// 写法一，标准主动联动
[
  {
    "name": "source",
    "component": "Input",
    "reactions": {
      "target": "target",
      "when": "{{$self.value === '123'}}",
      "fulfill": {
        "state": {
          "visible": false
        }
      },
      "otherwise": {
        "state": {
          "visible": true
        }
      }
    }
  },
  {
    "name": "target",
    "component": "Input"
  }
]
// 写法二，局部表达式分发联动
[
  {
    "name": "source",
    "component": "Input",
    "reactions": {
      "target": "target",
      "fulfill": {
        "state": {
            "visible": "{{$self.value === '123'}}"
        }
      }
    }
  },
  {
    "name": "target",
    "component": "Input"
  }
]
// 写法三，基于 Schema 协议联动
[
  {
    "name": "source",
    "component": "Input",
    "reactions": {
      "target": "target",
      "fulfill": {
        "schema": {
            "x-visible": "{{$self.value === '123'}}"
        }
      }
    }
  },
  {
    "name": "target",
    "component": "Input"
  }
]
// 写法四，基于 run 语句联动
[
  {
    "name": "source",
    "component": "Input",
    "reactions": {
      "target": "target",
      "fulfill": {
        "schema": {
          "run": "$form.setFieldState('target',state=>{state.visible = $self.value === '123'})"
        }
      }
    }
  },
  {
    "name": "target",
    "component": "Input"
  }
]
// 写法五，基于生命周期钩子联动
[
  {
    "name": "source",
    "component": "Input",
    "reactions": {
      "target": "target",
      "effects": ["onFieldInputValueChange"],
      "fulfill": {
        "state": {
          "visible": "{{$self.value === '123'}}"
        }
      }
    }
  },
  {
    "name": "target",
    "component": "Input"
  }
]
```

被动联动

```json
// 写法一，标准被动联动
[
  {
    "name": "source",
    "component": "Input"
  },
  {
    "name": "target",
    "component": "Input",
    "reactions": {
      "dependencies": ["source"],
      "fulfill": {
        "schema": {
          "x-visible": "{{$deps[0] === '123'}}"
        }
      }
    }
  }
]
// 写法二，相邻元素联动
[
  {
    "type":"array",
    "name": "dataSource",
    "component": "RCArrayTable",
    "items":[{
      "type": "object",
      "children":[{
        "name": "source",
        "component": "Input",
      }, {
        "name": "target",
        "component": "Input",
        "reactions": {
          "dependencies": [".source"],
          "fulfill": {
            "schema": {
              "x-visible": "{{$deps[0] === '123'}}"
            }
          }
        }
      }]
    }]
  },
]

```

复杂联动

```json
[
  {
    "type": "array",
    "name": "dataSource",
    "component": "RCArrayTable",
    "items": [
      {
        "type": "object",
        "children": [
          {
            "name": "source",
            "component": "Input"
          },
          {
            "name": "target",
            "component": "Input",
            "reactions": "{{myReaction}}" // myReaction 传入schemaScope
          }
        ]
      }
    ]
  }
]
```

组件属性联动

```json
// 写法一，操作状态
[
  {
    "name": "source",
    "component": "Input",
    "reactions": {
      "target": "target",
      "fulfill": {
        "state": {
          "component[1].style.color": "{{$self.value === '123' ? 'red' : 'blue'}}"
        }
      }
    }
  },
  {
    "name": "target",
    "component": "Input"
  }
]
// 写法二，操作 Schema 协议
[
  {
    "name": "source",
    "component": "Input",
    "reactions": {
      "target": "target",
      "fulfill": {
        "schema": {
            "x-component-props.style.color": "{{$self.value === '123' ? 'red' : 'blue'}}"
        }
      }
    }
  },
  {
    "name": "target",
    "component": "Input"
  }
]
```
内置表达式作用域
内置表达式作用域主要用于在表达式中实现各种联动关系

$self
代表当前字段实例，可以在普通属性表达式中使用，也能在 reactions 中使用

$values
代表顶层表单数据，可以在普通属性表达式中使用，也能在 reactions 中使用

$form
代表当前 Form 实例，可以在普通属性表达式中使用，也能在 reactions 中使用

$observable
用于创建响应式对象，使用方式与 observable 一致

$memo
用于创建持久引用数据，使用方式与 autorun.memo 一致

$effect
用于响应 autorun 第一次执行的下一个微任务时机与响应 autorun 的 dispose，使用方式与 autorun.effect 一致

$dependencies
只能在 x-reactions 中的表达式消费，与 reactions 定义的 dependencies 对应，数组顺序一致

$deps
只能在 x-reactions 中的表达式消费，与 reactions 定义的 dependencies 对应，数组顺序一致

$target
只能在 reactions 中的表达式消费，代表主动模式的 target 字段