Question

目前，我使用<Table>'s数组并使用<TableRow>呈现Material-UI的<TableRow>s .map()（http://www.material-ui.com/#/components/table）。每个<TableRow>都有<TableRowColumn>代表名字，如<TableRowColumn>Josh</TableRowColumn>。

但是，如果用户按下按钮，我希望按<TableRow>名字的字母顺序对<TableRowColumn>'s数组进行排序。例如说10个<TableRow>s，如果数组[0]的名字为Conny，而数组[1]有Adrian，则希望数组[1]成为数组[0]。

对此有何正确的解决方法？任何指导或见解将不胜感激。

修改

每个行都会使用数组rows进行渲染，其中包含属性为firstName和favColor的对象：

        {
          rows.map((row) => {
            return(
              <UserRow
                firstName={row.firstName}
                favColor={row.favColor}
              />
            )
          })
        }

每行定义如下：

const UserRow = (props) => {
  const {firstName, favColor} = props

  return (
    <TableRow>
      <TableRowColumn>{firstName}</TableRowColumn>
      <TableRowColumn>{favColor}</TableRowColumn>
    </TableRow>
  )
}

Answer 1

我会在应用将创建map的{{1}}操作之前对数组进行排序。

反应的思维方式是陈述性的。这意味着在视觉级别上，您应该提供应该显示的元素。因此，它们在传递给视图组件之前会被排序。

例如（我无法使用material-ui元素，因为该示例并未在stackoverflow设置中运行。只需将TableRows的所有元素替换为其材质-ui alter ego。）：

＆＃13;

TableComponent

＆＃13;

const data = [
  {firstname: "John", lastname: "Rover",  id:12},
  {firstname: "Bob",  lastname: "Taylor", id:24},
  {firstname: "Lucy", lastname: "Heart",  id:43}
]

// The table component is unaware of the data order operations
const TableComponent = ({tableData}) => <table><tbody>
  {tableData.map(d=> <tr key={d.id}>
      <td>{d.firstname}</td>
      <td>{d.lastname}</td>
  </tr>)}
</tbody></table>

// The parent component takes care of feeding the Table
// component with the data in the correct order.  
class App extends React.Component {
  state = { sortBy: "firstname"}
  handleChange = (event) => this.setState(
    {sortBy: event.target.value}
  );
  render () {
    const {data} = this.props; 
    const {sortBy} = this.state;
    const sortedData = data.sort((a,b) => a[sortBy]>b[sortBy]?1:-1)
    return <div>
      Sort by  
      <select value={sortBy} onChange={this.handleChange}>
        <option value="firstname">First Name</option>
        <option value="lastname">Last Name</option>
      </select>
      <h2>The table: </h2>
      <TableComponent tableData={sortedData} />
    </div>
  }
}
  
ReactDOM.render(
  <App data={data} />,
  document.getElementById('root')
);

＆＃13;

Answer 2

这是一个带有表格的应用程序的完整示例，可以通过单击标题对其行进行排序。评论是内联的the full example is available here

表的状态包含每当单击表列标题时排序的行以及排序列的属性名称。

@Override
    public void onDraw(Canvas canvas) {
        canvas.drawColor(Color.TRANSPARENT);
        bitmapCanvas.drawColor(Color.TRANSPARENT);
        bitmapCanvas.drawCircle(x, y, 40, eraserPaint);

        Matrix matrix = new Matrix();
        matrix.postTranslate(tattoo.getX(), tattoo.getY());

        canvas.drawBitmap(bitmap, matrix, paint);
    }

    public boolean onTouch(View view, MotionEvent event) {
        x = (int) event.getX();
        y = (int) event.getY();

        invalidate();
        return true;
    }

ReactJS with Material-UI：如何按字母顺序对Material-UI的<tablerow>数组进行排序？

2 个答案: