反応ブートストラップテーブルで反応ロードを追加する方法

Question

私はreactjsと反応ブートストラップテーブルで新しいです。私はデータが表示される前に反応コンポーネントに反応負荷を追加したい。データが非常に長く表示されるためです。動作しません。

が、これは私のコード

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: [] 
    }; 

    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}); 
    } 

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

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

    render() { 
    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 }> 
      <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; 

ベストの願いです！返信して欲しい。そのため

Answer 1

、まずそのboolのデータフェッチか、初期値はfalseであるかどうかを追跡するboolstateで変数を維持します。今React-Bootstrap-Table、optionのがプロパティがデフォルト値を設定し、noDataTextをカスタマイズするために使用される

constructor(){ 
    super(); 
    this.state = { 
     isDataFetched: false, 
    } 
} 

、あなたはこのように、という使用することができます。

<BootstrapTable 
    .... 
    options={tableOtions}> 
</BootstrapTable> 

今、このtableOtionsobjectと編集を定義しますこのようなnoDataTextプロパティ、：

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

データがFETである場合CHEDに成功し、データが空になります場合に表示されますreturn一部のテキストが、そうでない場合ローダーを返します。

_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'}}/> 
      ); 
     } 
} 

注：私はMaterial-UI RefreshIndicatorを使用し、あなたはまた、他のローダーであることを置き換えることができます。 React Bootstrap Tableでoptionオブジェクトの

リファレンス：http://allenfang.github.io/react-bootstrap-table/docs.html#noDataText

アップデート：はこのコードを使用して、表示したいというLoaderでRefreshIndicatorを置き換える：

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;