---
title: 普通使用
order: 1
---

````jsx
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import BspFormList from '@alibsp/form-list';
import ListMap from './listMap';
import { getTableData, getSchema } from './getData.tsx';
import { store, event } from '@ice/stark-data';
import '@alifd/next/index.scss'

class App extends Component {
   constructor() {
    super();

    this.state={
      status: 4
    };

    this.myRef = React.createRef();
  }

  componentDidMount () {
    // const columns = this.myRef.current.getColumns()
    setTimeout(() => {
      // const info = this.myRef.current.getInfo()
      // const data = this.myRef.current.getData()
      // console.log('infodata---', info, data)

      const mcpcoms = store.get('mcpcoms')
      console.log('mcpcoms---', mcpcoms, mcpcoms['测试表格'].ref.current.getColumns())
      mcpcoms['测试表格'].ref.current.updateColumns([{
          "title": "name",
          "dataIndex": "name.last",
          "width": 140
      }])
    }, 3000)
  }
  

  render() {
    return (
      <div>
        <div onClick={() => {this.setState({status: 6})}}>测试</div>
        <BspFormList
          // enableMcp
          name="测试表格"
          // ref={this.myRef}
          schema={getSchema()}
          fetchData={getTableData}
          {...ListMap}
          filterProps={{
            defaultExpended: false,
            // cacheParamsKey: 'custom_My_LIST'
          }}
          paginationProps={
            {
              pageSize: 5,
            }
          }
          tableShuttle={{
            expandedRowRender:(record) => record.time,
            // hasExpandedRowCtrl: false,
            onLocalFilterData: (data) => {
              return data.filter(item => item.id > this.state.status)
            }
          }}
        />
      </div>
    );
  }
}

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

```css
#usage {
  width: 100%
}
```