PROSAGA码农传奇-react-如何在反应引导表中添加反应加载

<div class =“post-text”itemprop =“text”>
  <P>
    为此，首先保持一个
     <code>
      bool
    </code>
     在
     <code>
      state
    </code>
     将跟踪数据是否被提取的变量，初始值
     <code>
      bool
    </code>
     将会
     <code>
      false
    </code>
    。
  </p>
   <pre>
    <code>
      constructor(){
     super();
     this.state = {
        isDataFetched: false,
     }
}

</code>
  </pre>
  <P>
    现在有一个属性
     <code>
      React-Bootstrap-Table
    </code>
    ，
     <code>
      option
    </code>
     用于设置默认值并自定义
     <code>
      noDataText
    </code>
    ，你可以使用它，像这样：
  </p>
   <pre>
    <code>
      <BootstrapTable 
     ....
     options={tableOtions}>
</BootstrapTable>

</code>
  </pre>
  <P>
    现在定义它
     <code>
      tableOtions
    </code>
     <code>
      object
    </code>
     并编辑
     <code>
      noDataText
    </code>
     财产，像这样：
  </p>
   <pre>
    <code>
      let tableOtions = {
    noDataText: this._setTableOption(),
};

</code>
  </pre>
  <P>
    如果成功获取数据则
     <code>
      return
    </code>
     一些文本，如果数据为空将显示，否则返回一个加载器：
  </p>
   <pre>
    <code>
      _setTableOption(){ 
     if(this.state.isDataFetched){
           return "No expenses found";
      }else{
           return(
               <RefreshIndicator size={40} left={0} top={0} status="loading" style={{position: 'relative', margin: '0px auto'}}/>
           );
      }
}

</code>
  </pre>
  <P>
    的<strong>
      注意
    </强>
    ：我用了一个
    <a href="http://www.material-ui.com/#/components/refresh-indicator" rel="noreferrer">
      Material-UI RefreshIndicator
    </A>
    ，您也可以通过任何其他装载机替换它。
  </p>
  <P>
    的<strong>
      参考
    </强>
     的
     <code>
      option
    </code>
     对象
     <code>
      React Bootstrap Table
    </code>
    ：
    <a href="http://allenfang.github.io/react-bootstrap-table/docs.html#noDataText" rel="noreferrer">
      http://allenfang.github.io/react-bootstrap-table/docs.html#noDataText
    </A>
  </p>
  <P>
    的<strong>
      更新：
    </强>
     使用此代码，并替换
     <code>
      RefreshIndicator
    </code>
     通过
     <code>
      Loader
    </code>
     你想要展示：
  </p>
   <pre>
    <code>
      import React, { Component } from 'react';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import PageHeader from 'react-bootstrap/lib/PageHeader';
import database from './database';
import root from 'window-or-global';
import Loading from 'react-loading';

class User extends Component {
    constructor(props) {
    super(props);
    this.state = {
      text:'',
      products: [],
      isDataFetched: false,
    };
    this.userRef = database.ref('users');
  }

componentDidMount() {
    this.userRef.on('value', this.gotData, this.errData); 
  }

gotData = (data) => {
    let newProducts = []
    const userdata = data.val();
    const keys = Object.keys(userdata);
    for (let i = 0; i < keys.length; i++) {
      const k = keys[i];
      newProducts.push({
        name: userdata[k].nama, address: userdata[k].address, email: userdata[k].email
      });
    }
    this.setState({products : newProducts, isDataFetched: true});
  }

errData = (err) => {
    console.log(err);
  }

handleClick = (rowKey) => {
    alert(this.refs.table.getPageByRowKey(rowKey));
  }

_setTableOption(){ 
    if(this.state.isDataFetched){
      return "No expenses found";
    }else{
      return(
        <RefreshIndicator size={40} left={0} top={0} status="loading" style={{position: 'relative', margin: '0px auto'}}/>
      );
    }
  }

render() {

let tableOtions = {
        noDataText: this._setTableOption(),
    };

return (
      <div>
        <Loading type ='spinning-bubbles' color='#e3e3e3' />
        <div className="col-lg-12">
          <PageHeader>Members</PageHeader>
        </div>
        <BootstrapTable  
          ref='table'
          data={ this.state.products }
          pagination={ true }
          search={ true }
          options={tableOtions}>
        >
          <TableHeaderColumn dataField='name' isKey={true} dataSort={true}>Name</TableHeaderColumn>
          <TableHeaderColumn dataField='address' dataSort={true}>Address</TableHeaderColumn>
          <TableHeaderColumn dataField='email'>Email</TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
}

export default User;

</code>
  </pre>
</DIV>