---
order: 0
title:
  zh-CN: 使用方式
  en-US: Type
---

## zh-CN

按钮有四种类型：主按钮、次按钮、虚线按钮、危险按钮。主按钮在同一个操作区域最多出现一次。

```jsx
import { JcSearchFilter } from 'jcbiz'

class DemoList extends React.Component {
  _getQueryData = () => {
    const values = this.formRef.props.form.getFieldsValue()
    console.log(values)
  }
  _getQueryData2 = values => {
    console.log(values)
  }

  render() {
    const filterData = {}

    const fields = [
      {
        fieldName: 'spuId',
        label: 'SPUid',
        componentType: 'Input',
        initialValue: filterData.spuId || undefined
      }
    ]

    const buttons = [
      {
        desc: '查询',
        type: 'action',
        btnType: 'primary',
        onClick: this._getQueryData
      },
      {
        desc: '查询2',
        type: 'action',
        btnType: 'primary',
        onClick: this._getQueryData2
      }
    ]

    return (
      <div>
        <JcSearchFilter wrappedComponentRef={inst => (this.formRef = inst)} fields={fields} buttons={buttons} />
      </div>
    )
  }
}

export default DemoList

ReactDOM.render(<DemoList />, mountNode)
```