Reactjs 如何更改表格按钮样式

有人知道如何更改react表下“下一步”和“上一步”按钮的样式吗

以下是定义的组件的简短示例：

    <ReactTable
      manual
      minRows={0}
      pageSize={1}
      data={data}
      columns={columns}
      pages={0}
      showPagination={true}
    />

---

下面是指向codesandbox的链接（完整示例为Sandbox）：

我基于“reactstrap”分页组件，用自己的分页组件替换了默认分页组件。更换部件很简单

import ReactTable, { ReactTableDefaults } from 'react-table';
import Pagination from './Pagination.component';

Object.assign(ReactTableDefaults, {
  PaginationComponent: Pagination
});

然后是分页组件的代码

import React, { Component } from 'react';
import classNames from 'classnames';
import { Pagination as BSPagination, PaginationItem, PaginationLink } from 'reactstrap';

const defaultButton = ({ ...props }) => <PaginationLink {...props} />;

export default class ReactTablePagination extends Component {
  constructor(props) {
    super();

    this.getSafePage = this.getSafePage.bind(this);
    this.changePage = this.changePage.bind(this);
    this.applyPage = this.applyPage.bind(this);

    this.state = {
      page: props.page
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ page: nextProps.page });
  }

  getSafePage(page) {
    if (Number.isNaN(page)) {
      page = this.props.page;
    }
    return Math.min(Math.max(page, 0), this.props.pages - 1);
  }

  changePage(page) {
    page = this.getSafePage(page);
    this.setState({ page });
    if (this.props.page !== page) {
      this.props.onPageChange(page);
    }
  }

  applyPage(e) {
    if (e) {
      e.preventDefault();
    }
    const page = this.state.page;
    this.changePage(page === '' ? this.props.page : page);
  }

  getFirstRecord(page, pageSize, totalSize) {
    if (!totalSize) {
      return 0;
    }
    return page * pageSize + 1;
  }

  getLastRecord(page, pageSize, totalSize, currentCount) {
    if (!totalSize) {
      return 0;
    }
    // const rec = (page + 1) * pageSize;
    return this.getFirstRecord(page, pageSize, totalSize) + currentCount - 1;
  }

  getPageElement = index => {
    const { page } = this.props;
    return (
      <PaginationItem key={index}>
        <PaginationLink
          className={classNames({ 'this-page': page === index })}
          onClick={() => this.changePage(index)}
        >
          {index + 1}
        </PaginationLink>
      </PaginationItem>
    );
  };

  pagination = () => {
    const items = [];
    const { page, pageRangeDisplayed, totalSize, pageSize, marginPagesDisplayed } = this.props;

    const BreakView = () => (
      <PaginationItem>
        <PaginationLink disabled>{'...'}</PaginationLink>
      </PaginationItem>
    );

    const pageCount = Math.ceil(totalSize / pageSize);

    if (pageCount <= pageRangeDisplayed) {
      for (let index = 0; index < pageCount; index++) {
        items.push(this.getPageElement(index));
      }
    } else {
      let leftSide = pageRangeDisplayed / 2;
      let rightSide = pageRangeDisplayed - leftSide;

      if (page > pageCount - pageRangeDisplayed / 2) {
        rightSide = pageCount - page;
        leftSide = pageRangeDisplayed - rightSide;
      } else if (page < pageRangeDisplayed / 2) {
        leftSide = page;
        rightSide = pageRangeDisplayed - leftSide;
      }

      let index;
      let currPage;
      let breakView;
      let createPageView = index => this.getPageElement(index);

      for (index = 0; index < pageCount; index++) {
        currPage = index + 1;

        if (currPage <= marginPagesDisplayed) {
          items.push(createPageView(index));
          continue;
        }

        if (currPage > pageCount - marginPagesDisplayed) {
          items.push(createPageView(index));
          continue;
        }

        if (index >= page - leftSide && index <= page + rightSide) {
          items.push(createPageView(index));
          continue;
        }

        if (items[items.length - 1] !== breakView) {
          breakView = <BreakView key={index} />;
          items.push(breakView);
        }
      }
    }

    return items;
  };

  render() {
    const {
      // Computed
      pages,
      // Props
      page,
      pageRangeDisplayed,
      marginPagesDisplayed,
      showPageSizeOptions,
      pageSizeOptions,
      pageSize,
      showPageJump,
      canPrevious,
      canNext,
      onPageSizeChange,
      className,
      totalSize,
      currentCount,
      PreviousComponent = defaultButton,
      NextComponent = defaultButton
    } = this.props;

    const PageItem = defaultButton;

    return (
      <div
        className={classNames({
          'ke-pagination-container': true,
          'd-flex': true,
          'flex-row': true,
          'p-2': true,
          'justify-content-between': true
        })}
      >
        <div className={classNames({ 'paging-buttons': true, 'flex-fill': true })}>
          <BSPagination size="sm">
            <PaginationItem>
              <PageItem
                previous
                onClick={() => {
                  if (!canPrevious) return;
                  this.changePage(page - 1);
                }}
                disabled={!canPrevious}
              >
                {'<'}
              </PageItem>
            </PaginationItem>

            {this.pagination()}

            <PaginationItem>
              <PageItem
                next
                onClick={() => {
                  if (!canNext) return;
                  this.changePage(page + 1);
                }}
                disabled={!canNext}
              >
                {'>'}
              </PageItem>
            </PaginationItem>
          </BSPagination>
        </div>
        {showPageSizeOptions && (
          <span
            className={classNames({
              'flex-fill': true,
              'select-wrap': true,
              '-pageSizeOptions': true,
              'text-center': true
            })}
          >
            <select onChange={e => onPageSizeChange(Number(e.target.value))} value={pageSize}>
              {pageSizeOptions.map((option, i) => (
                // eslint-disable-next-line react/no-array-index-key
                <option key={i} value={option}>
                  {`${option} ${this.props.rowsText}`}
                </option>
              ))}
            </select>
          </span>
        )}
        <div className="flex-fill text-right">
          Showing {this.getFirstRecord(page, pageSize, totalSize)} thru{' '}
          {this.getLastRecord(page, pageSize, totalSize, currentCount)} of {totalSize}
        </div>
      </div>
    );
  }
}

import React，{Component}来自'React'；
从“类名称”导入类名称；
从“reactstrap”导入{Pagination as BSPagination、PaginationItem、PaginationLink}；
constDefaultButton=（{…props}）=>；
导出默认类ReactTablePagination扩展组件{
建造师（道具）{
超级（）；
this.getSafePage=this.getSafePage.bind（this）；
this.changePage=this.changePage.bind（this）；
this.applyPage=this.applyPage.bind（this）；
此.state={
页面：props.page
};
}
组件将接收道具（下一步）{
this.setState（{page:nextrops.page}）；
}
getSafePage（第页）{
if（编号：isNaN（第页））{
page=this.props.page；
}
返回Math.min（Math.max（第0页），this.props.pages-1）；
}
更改页面（第页）{
page=此.getSafePage（第页）；
this.setState（{page}）；
如果（this.props.page！==第页）{
此.props.onPageChange（第页）；
}
}
应用页面（e）{
如果（e）{
e、 预防默认值（）；
}
const page=this.state.page；
this.changePage（page==''？this.props.page:page）；
}
getFirstRecord（页面、页面大小、总大小）{
如果（！totalSize）{
返回0；
}
返回页面*pageSize+1；
}
getLastRecord（页面、页面大小、总大小、当前计数）{
如果（！totalSize）{
返回0；
}
//const rec=（第+1页）*页面大小；
返回此.getFirstRecord（page，pageSize，totalSize）+currentCount-1；
}
getPageElement=索引=>{
const{page}=this.props；
返回(
this.changePage（索引）}
>
{index+1}
);
};
分页=（）=>{
常量项=[]；
const{page，pagerangesdisplayed，totalSize，pageSize，marginPagesDisplayed}=this.props；
const BreakView=（）=>(
{'...'}
);
const pageCount=Math.ceil（totalSize/pageSize）；
如果（pageCount pageCount-显示的PageRange/2）{
右侧=页面计数-页面；
leftSide=页面范围显示-右侧；
}否则如果（第页<显示的页面范围/2）{
左侧=页面；
右侧=页面范围显示-左侧；
}
let指数；
让我们翻页；
让breakView；
让createPageView=index=>this.getPageElement（index）；
对于（索引=0；索引=页面-左侧&&index）
{''}
{showPageSizeOptions&&(
onPageSizeChange（Number（e.target.value））}value={pageSize}>
{pageSizeOptions.map（（选项，i）=>(
//eslint禁用下一行反应/无数组索引键
{`${option}${this.props.rowsText}`}
))}
)}
显示{this.getFirstRecord（page，pageSize，totalSize）}到{'}
{totalSize}的{this.getLastRecord（page，pageSize，totalSize，currentCount）}
);
}
}

最后一部分是一些额外的分页道具，它们将自动从我的ReactTable设置传播到新组件

<ReactTable
  columns={this.columns}
  data={data}
  pages={pages}
  loading={loading}
  onFetchData={this.handleTableChange}
  defaultPageSize={pageSize}
  defaultSorted={sorted}
  filtered={this.state.filtered}
  filtereable
  getTdProps={this.onRowClick}
  getPaginationProps={() => {
    return {
      totalSize: this.state.totalSize,
      currentCount: this.state.currentCount,
      pageRangeDisplayed: 4,
      marginPagesDisplayed: 1
    }
  }}
  manual
  className={classNames({ '-striped': true, '-highlight': true })}
/>

{
返回{
totalSize:this.state.totalSize，
currentCount:this.state.currentCount，
显示的页面范围：4，
显示的页边距：1
}
}}
手册
className={classNames（{'-striped'：true，'-highlight'：true}）}
/>

也有一些风格的地方，但这是它的要点。这给了我一个如下图所示的布局

---

基于“reactstrap”分页组件，我将默认分页组件替换为自己的分页组件。更换部件很简单

import ReactTable, { ReactTableDefaults } from 'react-table';
import Pagination from './Pagination.component';

Object.assign(ReactTableDefaults, {
  PaginationComponent: Pagination
});

然后是分页组件的代码

import React, { Component } from 'react';
import classNames from 'classnames';
import { Pagination as BSPagination, PaginationItem, PaginationLink } from 'reactstrap';

const defaultButton = ({ ...props }) => <PaginationLink {...props} />;

export default class ReactTablePagination extends Component {
  constructor(props) {
    super();

    this.getSafePage = this.getSafePage.bind(this);
    this.changePage = this.changePage.bind(this);
    this.applyPage = this.applyPage.bind(this);

    this.state = {
      page: props.page
    };
  }

  componentWillReceiveProps(nextProps) {
    this.setState({ page: nextProps.page });
  }

  getSafePage(page) {
    if (Number.isNaN(page)) {
      page = this.props.page;
    }
    return Math.min(Math.max(page, 0), this.props.pages - 1);
  }

  changePage(page) {
    page = this.getSafePage(page);
    this.setState({ page });
    if (this.props.page !== page) {
      this.props.onPageChange(page);
    }
  }

  applyPage(e) {
    if (e) {
      e.preventDefault();
    }
    const page = this.state.page;
    this.changePage(page === '' ? this.props.page : page);
  }

  getFirstRecord(page, pageSize, totalSize) {
    if (!totalSize) {
      return 0;
    }
    return page * pageSize + 1;
  }

  getLastRecord(page, pageSize, totalSize, currentCount) {
    if (!totalSize) {
      return 0;
    }
    // const rec = (page + 1) * pageSize;
    return this.getFirstRecord(page, pageSize, totalSize) + currentCount - 1;
  }

  getPageElement = index => {
    const { page } = this.props;
    return (
      <PaginationItem key={index}>
        <PaginationLink
          className={classNames({ 'this-page': page === index })}
          onClick={() => this.changePage(index)}
        >
          {index + 1}
        </PaginationLink>
      </PaginationItem>
    );
  };

  pagination = () => {
    const items = [];
    const { page, pageRangeDisplayed, totalSize, pageSize, marginPagesDisplayed } = this.props;

    const BreakView = () => (
      <PaginationItem>
        <PaginationLink disabled>{'...'}</PaginationLink>
      </PaginationItem>
    );

    const pageCount = Math.ceil(totalSize / pageSize);

    if (pageCount <= pageRangeDisplayed) {
      for (let index = 0; index < pageCount; index++) {
        items.push(this.getPageElement(index));
      }
    } else {
      let leftSide = pageRangeDisplayed / 2;
      let rightSide = pageRangeDisplayed - leftSide;

      if (page > pageCount - pageRangeDisplayed / 2) {
        rightSide = pageCount - page;
        leftSide = pageRangeDisplayed - rightSide;
      } else if (page < pageRangeDisplayed / 2) {
        leftSide = page;
        rightSide = pageRangeDisplayed - leftSide;
      }

      let index;
      let currPage;
      let breakView;
      let createPageView = index => this.getPageElement(index);

      for (index = 0; index < pageCount; index++) {
        currPage = index + 1;

        if (currPage <= marginPagesDisplayed) {
          items.push(createPageView(index));
          continue;
        }

        if (currPage > pageCount - marginPagesDisplayed) {
          items.push(createPageView(index));
          continue;
        }

        if (index >= page - leftSide && index <= page + rightSide) {
          items.push(createPageView(index));
          continue;
        }

        if (items[items.length - 1] !== breakView) {
          breakView = <BreakView key={index} />;
          items.push(breakView);
        }
      }
    }

    return items;
  };

  render() {
    const {
      // Computed
      pages,
      // Props
      page,
      pageRangeDisplayed,
      marginPagesDisplayed,
      showPageSizeOptions,
      pageSizeOptions,
      pageSize,
      showPageJump,
      canPrevious,
      canNext,
      onPageSizeChange,
      className,
      totalSize,
      currentCount,
      PreviousComponent = defaultButton,
      NextComponent = defaultButton
    } = this.props;

    const PageItem = defaultButton;

    return (
      <div
        className={classNames({
          'ke-pagination-container': true,
          'd-flex': true,
          'flex-row': true,
          'p-2': true,
          'justify-content-between': true
        })}
      >
        <div className={classNames({ 'paging-buttons': true, 'flex-fill': true })}>
          <BSPagination size="sm">
            <PaginationItem>
              <PageItem
                previous
                onClick={() => {
                  if (!canPrevious) return;
                  this.changePage(page - 1);
                }}
                disabled={!canPrevious}
              >
                {'<'}
              </PageItem>
            </PaginationItem>

            {this.pagination()}

            <PaginationItem>
              <PageItem
                next
                onClick={() => {
                  if (!canNext) return;
                  this.changePage(page + 1);
                }}
                disabled={!canNext}
              >
                {'>'}
              </PageItem>
            </PaginationItem>
          </BSPagination>
        </div>
        {showPageSizeOptions && (
          <span
            className={classNames({
              'flex-fill': true,
              'select-wrap': true,
              '-pageSizeOptions': true,
              'text-center': true
            })}
          >
            <select onChange={e => onPageSizeChange(Number(e.target.value))} value={pageSize}>
              {pageSizeOptions.map((option, i) => (
                // eslint-disable-next-line react/no-array-index-key
                <option key={i} value={option}>
                  {`${option} ${this.props.rowsText}`}
                </option>
              ))}
            </select>
          </span>
        )}
        <div className="flex-fill text-right">
          Showing {this.getFirstRecord(page, pageSize, totalSize)} thru{' '}
          {this.getLastRecord(page, pageSize, totalSize, currentCount)} of {totalSize}
        </div>
      </div>
    );
  }
}

import React，{Component}来自'React'；
从“类名称”导入类名称；
从“reactstrap”导入{Pagination as BSPagination、PaginationItem、PaginationLink}；
constDefaultButton=（{…props}）=>；
导出默认类ReactTablePagination扩展组件{
建造师（道具）{
超级（）；
this.getSafePage=this.getSafePage.bind（this）；
this.changePage=this.changePage.bind（this）；
this.applyPage=this.applyPage.bind（this）；
此.state={
页面：props.page
};
}
组件将接收道具（下一步）{
this.setState（{page:nextrops.page}）；
}
getSafePage（第页）{
if（编号：isNaN（第页））{
page=this.props.page；
}
返回Math.min（Math.max（第0页），this.props.pages-1）；
}
更改页面（第页）{
page=此.getSafePage（第页）；
this.setState（{page}）；
如果（this.props.page！==第页）{
此.props.onPageChange（第页）；
}
}
应用页面（e）{
如果（e）{
e、 预防默认值（）；
}
const page=this.state.page；
this.changePage（page==''？this.props.page:page）；
}
getFirstRecord（页面、页面大小、总大小）{
如果（！totalSize）{
返回0；
}
返回页面*pageSize+1；
}
getLastRecord（页面、页面大小、总大小、当前计数）{
如果（！totalSize）{
返回0；
}
//const rec=（第+1页）*页面大小；
返回此.getFirstRecord（page，pageSize，totalSize）+currentCount-1；
}
getPageElement=索引=>{
const{page}=this.props；
返回(