---
title: Simple Usage
order: 1
---

本 Demo 演示新规则树组件的用法。

```jsx
import React, { Component, useState, useEffect } from 'react';
import ReactDOM from 'react-dom';
import {
  SchemaForm,
  SchemaMarkupField as Field,
  FormEffectHooks,
  connect,
  createFormActions,
  registerFormField
} from '@formily/next'
import { Input as Input2, Icon, NumberPicker,CascaderSelect } from "@alifd/next";

import { Input, Select } from "@formily/next-components";
import RiilFormilyRuleTree from '@riil-frontend/component-riil-formily-rule-tree';


const { onFieldValueChange$ } = FormEffectHooks;




// 注册自定义组件，带图标的input组件
registerFormField(
  "Input-Icon",
  connect()((props) => {
    return (
      <div style={{width: "100%"}}>
        {<Input2 style={{width: "88%"}} />
		}
        <Icon  size="xs" type="help" style={{marginLeft:"4px"}}/>
      </div>
    );
  })
);


const selectDs = (len = 20) => {
	const ds = [];
	for (let i = 1; i <= len; i++) {
		ds.push({ label: `选择项${i}`, value: `${i}` });
	}
	return ds;
};

let globalAction = "no"
const onChange = (values,currentValue, index, action) => {
	globalAction = action
	console.log('onChange', values, currentValue, index, action);
};

const onChangeItem = (path, value, set, setRow, values) => {


		console.log("----------onChangeItem------------", path, value, globalAction)
    
		let pathArr = path.split(".")
		let groupIndex = pathArr[0].replace('ruleGroup', '')
		let cardIndex = pathArr[2]
		if(path === 'ruleGroup'+groupIndex+'.children.' + pathArr[2] + '.selectValue1') { 
			if(value === 'abc') {
				setRow(groupIndex, cardIndex, 1, false)
				set('ruleGroup'+groupIndex+'.children.'+cardIndex+'.value4', state => {
					state.visible = false

				})
			} else {
				setRow(groupIndex, cardIndex, 1, true)
				set('ruleGroup'+groupIndex+'.children.'+cardIndex+'.value4', state => {
             		state.visible = true
           		})
			}
		}	

};


const fields = [
	{
	name: "选择对象", 
	items: [
		{ name: 'selectValueMy1', type: 'string', 'x-component': 'Input-Icon', 'x-component-props': {}, span: 2},
		{ name: 'selectValue1a', required: true, type: 'string', 'x-component': 'Input', 'x-component-props': {label:'标题1'}, span: 1.5},
		{ name: 'selectValue2',  type: 'string', 'x-component': 'Select', 'x-component-props':{label:'标题'}, enum: selectDs(), span: 2},
		{ name: 'selectValue1', type: 'string', 'x-component': 'Input', 'x-component-props': {label: "条件", innerAfter: "%" }, span: 4},
		{ name: 'selectValue1b', type: 'string', 'x-component': 'Icon', 'x-component-props': {size:"xs", type:"help", className:"treeDesc"}, span: 1},
	]},
	{
	name: "判断方式",
	items: [
		{ name: 'selectValue3', type: 'string', 'x-component': 'Select', 'x-component-props':{ mode: 'multiple' }, enum: selectDs(), span: 2}
	]},
	{
	name: "满足条件",
	items: [
		{ name: 'numberPickerValue1', type: 'string', 'x-component': 'NumberPicker', 'x-component-props': {alwaysShowTrigger:true, label:'过去'} , span: 1},
		{ name: 'value3', type: 'string', 'x-component': 'Select', enum: selectDs(), span: 1},
		{ name: 'value4', type: 'string', 'x-component': 'NumberPicker', 'x-component-props': {alwaysShowTrigger:true, label:'阈值'} , span: 2},
		// { name: 'value5', type: 'string', 'x-component': 'Select', enum: selectDs(), span: 2},
		// { name: 'value6', type: 'string', 'x-component': 'NumberPicker', 'x-component-props': {alwaysShowTrigger:true, label:'次数'} , span: 2},
		// { name: 'value7', type: 'string', 'x-component': 'NumberPicker', 'x-component-props': {alwaysShowTrigger:true, label:''} , span: 2},
		// { name: 'value8', type: 'string', 'x-component': 'NumberPicker', 'x-component-props': {alwaysShowTrigger:true, label:'次数'} , span: 2},
		// { name: 'value9', type: 'string', 'x-component': 'NumberPicker', 'x-component-props': {alwaysShowTrigger:true, label:''} , span: 2},
		// { name: 'value10', type: 'string', 'x-component': 'NumberPicker', 'x-component-props': {alwaysShowTrigger:true, label:'次数'} , span: 2},
		// { name: 'value11', type: 'string', 'x-component': 'NumberPicker', 'x-component-props': {alwaysShowTrigger:true, label:''} , span: 2},
	]},
	{
	name: "自定义", 
	items: [
		{ name: 'selectValue1', type: 'string', 'x-component': 'Input', 'x-component-props': {label: "条件", addonAfter: "%" }, span: 2},
		{ name: 'selectValue2', type: 'string', 'x-component': 'Select', 'x-component-props':{}, enum: selectDs(), span: 2}
	]},
];


const defaultAddFieldsValue = { 
	relation: 'and',
	children: [
		{
			selectValue1: 'abcd',
			selectValue2: '1',
			selectValueMy1:'aaa',
			selectValue3: ["1"],
			numberPickerValue1:'1',
			value3: '2',
			value4: '4',
			value5: '3',
			value6: '5',
			value7: '1',
			value8: '4',
			value9: '3',
			value10: '5',
			value11: '1',
		}]
	};

const initValues = [
	{
		relation: 'and',
		children: [
			{
				selectValue1: 'abc',
				selectValue2: '1',
				selectValueMy1:'aaa',
				selectValue3: ["1"],
				numberPickerValue1:'1',
				value3: '2',
				value4: '4',
				value5: '3',
				value6: '5',
				value7: '1',
				value8: '4',
				value9: '3',
				value10: '5',
				value11: '1',
			},
			// {
			// 	selectValue1: 'bbb',
			// 	selectValue2: '1',
			// 	selectValueMy1:'bbb',
			// 	selectValue3: ["1"],
			// 	numberPickerValue1:'1',
			// 	value3: '2',
			// 	value4: '4',
			// 	value5: '4',
			// 	value6: '1',
			// 	value7: '1',
			// 	value8: '4',
			// 	value9: '3',
			// 	value10: '5',
			// 	value11: '1',
			// },
		],
	},
	// 'and',
	// {
	// 	relation: 'or',
	// 	children: [
	// 		{
	// 			selectValue1: 'ccc',
	// 			selectValue2: '1',
	// 			selectValueMy1:'ccc',
	// 			selectValue3: '1',
	// 			numberPickerValue1:'1',
	// 			value3: '2',
	// 			value4: '4',
	// 			value5: '4',
	// 			value6: '1',
	// 			value7: '1',
	// 			value8: '4',
	// 			value9: '3',
	// 			value10: '5',
	// 			value11: '1',
	// 		},
	// 	],
	// },
];





// 1.创建自定义组件
function My(props) {		
	console.log(props.groupIndex)
	useEffect(() => {
		
	}, []) 

	return (
		<SchemaForm>
			<Field type="string" title="标题" name="a2" x-component="Input" />
			<Field type="string" title="条件" name="a3" x-component="Input" />
		</SchemaForm>
	)
}

// 2.创建添加行的默认值
const defaultAddFieldsValue2 = { 
	relation: 'and',
	children: [
		{
			a1:"rr"
		}]
	};

// 创建初始化数据
const initValues2 = [
	{
		relation: 'and',
		children: [
			{
				a1:"aaaa"
			},
			{
				a2:"bbb"
			},
		],
	},
	'and',
	{
		relation: 'or',
		children: [
			{
				a1:"ccc",
				a2:"ccc"
			},
		],
	},
];



	// <br />
	// 		<br />
	// 		<br />
	// 		<br />
	// 		<br />
	// 		<br />
	// 		<br />
	// 		<br />
	// 		<br />
	// 		<br />
	// 		<hr />
	// 		<br />
	// 		<br />
	// 		<br />
	// 		<br />
	// 		<br />
	// 		<br />
	// 		<br />
	// 		<br />
	// 		<br />
	// 		<br />
	// 		<RiilFormilyRuleTree
	// 			defaultAddFieldsValue={defaultAddFieldsValue2}
	// 			onChange={onChange}
	// 			initValues={initValues2}
	// 			onSetFormilyItem={(groupIndex, cardIndex)=> {
	// 				return <My groupIndex={groupIndex} cardIndex={cardIndex} />
	// 			}}
	// 			mode="self"
	// 			components={{Input, Select, NumberPicker, Icon}}
	// 			id={"aaa2"}
	// 		/>

function App() {
	return (
		<>
		<div style={{ width: '70vw' }}>
			<RiilFormilyRuleTree
				fields={fields}
				defaultAddFieldsValue={defaultAddFieldsValue}
				onChange={onChange}
				onChangeItem={onChangeItem}
				initValues={initValues}
				components={{Input, Select, NumberPicker, Icon}}
				id={"aaa1"}
			/>
		</div>
		<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<hr />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<br />
			<RiilFormilyRuleTree
				defaultAddFieldsValue={defaultAddFieldsValue2}
				onChange={onChange}
				initValues={initValues2}
				onSetFormilyItem={(groupIndex, item)=> {
					return <My groupIndex={groupIndex} />
				}}
				onEffects={(action)=>{
					onFieldValueChange$("*.*.*.*").subscribe(({ name, value }) => {
			
						console.log(33333, name, value);
						let pathArr = name.split(".")
						let groupIndex = pathArr[0].replace('ruleGroup', '')
						let cardIndex = pathArr[2]
						if(name === 'ruleGroup'+groupIndex+'.children.' + pathArr[2] + '.a2') { 
							if(value === 'abc') {
								action.setFieldState('ruleGroup'+groupIndex+'.children.'+cardIndex+'.a3', state => {
									state.visible = false

								})
							} else {
								action.setFieldState('ruleGroup'+groupIndex+'.children.'+cardIndex+'.value4', state => {
									state.visible = true
								})
							}
						}	
					});
				}}
				mode="self"
				components={{Input, Select, NumberPicker, Icon}}
				id={"aaa2"}
			/>
		</>
	);
}

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