---
title: 限制条件用法
order: 10
---

基础用法。

```jsx
import React, { Component ,useRef, useState} from 'react';
import ReactDOM from 'react-dom';
import ResAdvancedSearch from '@riil-frontend/component-res-advanced-search';
import request from './request.js'
const initData=JSON.parse("{\"ruleValues\":[{\"children\":[{\"type\":{\"rootCi\":\"switch\",\"type\":\"all\"}},{\"type\":{\"rootCi\":\"switch\",\"attributesOption\":[{\"name\":\"名称\",\"value\":\"name\"},{\"name\":\"显示名称\",\"value\":\"display_name\"},{\"name\":\"IPv4地址\",\"value\":\"ipv4_address\"},{\"name\":\"IPv6地址\",\"value\":\"ipv6_address\"},{\"name\":\"类型\",\"value\":\"type\"},{\"name\":\"序列号\",\"value\":\"serial_number\"},{\"name\":\"用途\",\"value\":\"use\"},{\"name\":\"所属集群\",\"value\":\"owned_cluster\"},{\"name\":\"集群成员ID\",\"value\":\"cluster_member_id\"},{\"name\":\"成员角色\",\"value\":\"member_role\"},{\"name\":\"Loopback地址表\",\"value\":\"switch.loopback_address_list\"},{\"name\":\"购置日期\",\"value\":\"purchase_date\"},{\"name\":\"启用日期\",\"value\":\"start_date\"},{\"name\":\"服役年限\",\"value\":\"service_years\"},{\"name\":\"服役到期时间\",\"value\":\"service_expiration_time\"},{\"name\":\"维保情况\",\"value\":\"maintenance_situation\"},{\"name\":\"维保到期时间\",\"value\":\"maintenance_expiration_time\"},{\"name\":\"资产编号\",\"value\":\"asset_number\"},{\"name\":\"资产状态\",\"value\":\"asset_status\"},{\"name\":\"所属机房\",\"value\":\"owned_computer_room\"},{\"name\":\"所属机柜\",\"value\":\"owned_cabinet\"},{\"name\":\"起始U位\",\"value\":\"start_u_location\"},{\"name\":\"结束U位\",\"value\":\"end_u_location\"},{\"name\":\"U数\",\"value\":\"u_number\"},{\"name\":\"MAC地址\",\"value\":\"mac_address\"},{\"name\":\"是否支持POE\",\"value\":\"is_support_poe\"},{\"name\":\"是否堆叠\",\"value\":\"is_support_stack\"},{\"name\":\"所属区域\",\"value\":\"owned_area\"},{\"name\":\"厂商\",\"value\":\"company\"},{\"name\":\"系列\",\"value\":\"series\"},{\"name\":\"型号\",\"value\":\"model\"},{\"name\":\"版本\",\"value\":\"version\"}],\"dataType\":\"string\",\"attributes\":\"name\",\"type\":\"attributes\",\"searchValue\":\"18\",\"option\":\"regex\"},\"key\":1}],\"relation\":\"or\"}],\"searchConditionsString\":\"(!type('network_link') || (type('network_link') && network_link.connect_type = 'exit'))&&(type('switch')) || ((type('switch') && regex('18',name)))\"}")



function App () {
    const ref = useRef();
    const [disabled,setDisabled]=useState(false)
     const [ciType,setCiType]=useState(null)
function onChangeCallBack(value){



    if(value?.[0]?.children?.[0].type?.rootCi){
     setCiType(value?.[0]?.children?.[0]
.type?.rootCi)
    }


}

function maxConditionNumCallBack(value){
    if(value>1){
    setDisabled(true)
  }else{
     setDisabled(false)
  }
}
    return (
      <div>
        <ResAdvancedSearch 
				disabledFirstSelect={disabled}
        filterSearchWay={["all","attributes"]}
         onChangeCallBack={ onChangeCallBack}
			 // module="resourceCenter"
        ciType={ciType}
        domainIsOptional={true}
         maxConditionNumCallBack={maxConditionNumCallBack}
         maxGroupNum={2}
         maxConditionNum={4}
				 initValues={initData.ruleValues	}
        request={request}
          />
      </div>
    );
  
}

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