antd-mobile里面table组件怎么增加下拉刷新RefreshControl组件？

Question

antd-mobile里面table组件怎么增加下拉刷新RefreshControl组件？

require('./css/Adjsalarytable.less');
import { Component, LogicRender } from 'refast';
import logic from './AdjsalarytableLogic';
import { Link } from 'react-keeper';
import { List, SearchBar, Button, WhiteSpace, WingBlank, Table, RefreshControl } from 'antd-mobile';

let pageIndex = 0;
  
class Adjsalarytable extends Component {
    constructor(props) {
        super(props, Logic);
        this.onScroll = this.onScroll.bind(this);
        this.onRefresh = this.onRefresh.bind(this);
        this.onEndReached=this.onEndReached.bind(this);
    }
    
    onEndReached = () => {
        this.execute('changeLoading',false)
    }
    onRefresh = () => {
      this.execute('changeState', true);
      // this.initData = [`ref${pageIndex++}`, ...this.initData];
      // console.log(this.state.initData)
      this.execute('changeInitData', [`ref${pageIndex++}`, ...this.state.initData])
      this.execute('changeData', this.state.dataSource, this.state.initData);
      setTimeout(() => {
        this.execute('changeState', false);
      }, 1000)
      // console.log(this.state.refreshing);
    };
  
    onScroll = () => {
      console.log('sss');
    };
    render() {
        const { state: { buttonText, inputText, dataSource, columns, refreshing, initData ,isLoading , data} } = this;

        let index = data.length - 1;

        const row = (rowData, sectionID, rowID) => {
            if (index < 0) {
              index = data.length - 1;
            }
            const obj = data[index--];
            return (
                <div key={rowID}
                    style={{
                        padding: '0.08rem 0.16rem',
                        backgroundColor: 'white',
                    }}
                    className="list"
                >
                <tr>
                    <td>{obj.name}</td>
                    <td>{obj.department}</td>
                    <td>{obj.basepay}</td>
                    <td>{obj.changetime}</td>
                    <td>{obj.money}</td>
                    <td>{obj.timelong}</td>
                    <td>{obj.one}</td>
                    <td>{obj.two}</td>
                </tr>
              </div>
            );
        };
        return (
            <div className="adjsalarytable">
                <div className="top-search displayflex">
                    <SearchBar className="flex" placeholder="搜索" />
                    <Link to="condition" className="sx"><span className="sx-btn"></span></Link>
                </div>
                <div className="table">
                    <Table 
                        titleFixed 
                        scrollX 
                        dataSource={this.state.dataSource} 
                        columns={this.state.columns}
                        renderRow={row}
                        renderFooter={() => <div style={{ padding: 30, textAlign: 'center' }}>
                        {isLoading ? '加载中...' : '加载完毕'}
                        </div>}
                        initialListSize={15}
                        pageSize={5}
                        scrollRenderAheadDistance={200}
                        scrollEventThrottle={20}
                        onScroll={this.onScroll}
                        style={{
                        height: document.documentElement.clientHeight,
                        border: '1px solid #ddd',
                        margin: '0.1rem 0',
                        }}
                        onEndReached={this.onEndReached}
                        scrollerOptions={{ scrollbars: true }}
                        refreshControl={<RefreshControl
                        refreshing={refreshing}
                        onRefresh={this.onRefresh}
                        />} 
                    /> 
                </div>
            </div>
        );
    }

}

export default Adjsalarytable;

Answer 1

没法添加。Table 组件没有实现 scroll 事件。