Semantic-UI Table，持久排序

Question

有没有办法让 Semantic-UI 表排序在多个组件重新呈现时保持不变。例如，如果我按“名称”列升序排序，即使我的表父组件重新呈现，是否有办法使这种排序保持应用？

有没有办法做到这一点而不会弄乱表实现？

Answer 1

当然，您可以在本地状态/redux 状态中设置列名来排序（IE：“名称”）和方向（“ASC”/“DESC”），然后在每次重新加载时根据状态应用排序。

这在 DOCS 中得到了很好的证明：

import _ from 'lodash'
import React, { Component } from 'react'
import { Table } from 'semantic-ui-react'

const tableData = [
  { name: 'John', age: 15, gender: 'Male' },
  { name: 'Amber', age: 40, gender: 'Female' },
  { name: 'Leslie', age: 25, gender: 'Female' },
  { name: 'Ben', age: 70, gender: 'Male' },
]

export default class TableExampleSortable extends Component {
  state = {
    column: null,
    data: tableData,
    direction: null,
  }

  handleSort = clickedColumn => {
    const { column, data, direction } = this.state

    if (column !== clickedColumn) {
      this.setState({
        column: clickedColumn,
        data: _.sortBy(data, [clickedColumn]),
        direction: 'ascending',
      })

      return
    }

    this.setState({
      data: data.reverse(),
      direction: direction === 'ascending' ? 'descending' : 'ascending',
    })
  }

  render() {
    const { column, data, direction } = this.state

    return (
      <Table sortable celled fixed>
        <Table.Header>
          <Table.Row>
            <Table.HeaderCell
              sorted={column === 'name' ? direction : null}
              onClick={this.handleSort('name')}
            >
              Name
            </Table.HeaderCell>
            <Table.HeaderCell
              sorted={column === 'age' ? direction : null}
              onClick={this.handleSort('age')}
            >
              Age
            </Table.HeaderCell>
            <Table.HeaderCell
              sorted={column === 'gender' ? direction : null}
              onClick={this.handleSort('gender')}
            >
              Gender
            </Table.HeaderCell>
          </Table.Row>
        </Table.Header>
        <Table.Body>
          {_.map(data, ({ age, gender, name }) => (
            <Table.Row key={name}>
              <Table.Cell>{name}</Table.Cell>
              <Table.Cell>{age}</Table.Cell>
              <Table.Cell>{gender}</Table.Cell>
            </Table.Row>
          ))}
        </Table.Body>
      </Table>
    )
  }
}

参考：https://react.semantic-ui.com/collections/table/#variations-sortable

Answer 2

根据您的需求，我为您创建了一个示例。输出如图所示。

底部的输入框和复选框模拟用户添加数据。点击“提交”按钮后，数据将自动按顺序添加到表格中。处理数据添加的方法如下：

addDate1 = () => {

    const { column, data, direction} = this.state
    let addData = {
        name: this.state.inputName,
        age: this.state.inputAge,
        gender: this.state.gender
    }
    let newData = [...data,addData]
    if (!column){
        console.log('Please select a colume')
    } else if (column === 'name'){
        this.setState({
            column: 'name',
            data: _.sortBy(newData, ['name']),
            direction: 'ascending',
        })
    } else if (column === 'age'){
        this.setState({
            column: 'age',
            data: _.sortBy(newData, ['age']),
            direction: 'ascending',
        })
    } else if (column === 'gender'){
        this.setState({
            column: 'gender',
            data: _.sortBy(newData, ['gender']),
            direction: 'ascending',
        })
    } else {
        console.log('error')
    }
}

工作示例在这里：https://codesandbox.io/s/github/stackOverflow166/setable