React - 根据复选框将数据行移动到新表

Question

我有一个由一系列api调用填充的日程表。我正在使用SUIR来呈现<Table>中的每个时间表和一些识别信息。我在每个时间表之前在未标记的列中添加了slider。这将表示“导出”计划的布尔选项。

  <Table.Body>
    {Object.values(schedules).map(
      ({ id, startTime, selfUri, status }) => {
        return (
          <Table.Row>
            <Checkbox slider onChange={this.slider} />
            <Table.Cell>{id}</Table.Cell>
            <Table.Cell>
              {format(startTime, "MMM Do YYYY, h:mm:ss A")}
            </Table.Cell>
            <Table.Cell>{selfUri}</Table.Cell>
            <Table.Cell>{status}</Table.Cell>
          </Table.Row>
        );
      }
    )}
  </Table.Body>

我目前有这个slider更改处理程序

  slider = () =>
    this.setState({ exportSlider: !this.state.exportSlider }, () => {
      console.log("slider --> ", this.state.exportSlider);
    });

但这只能跟踪一个滑块状态。如何从每个相应的计划中跟踪每个滑块状态？我如何获取slider === true时间表并将它们添加到要导出的新表中？

我有一个代码沙箱here，它有一些时间表和滑块功能。

Answer 1

您可以将表行抽象为单独的组件。然后你可以让每一行跟踪它自己的滑块状态。像这样的组件的示例可能如下：

import React, { Component } from "react";
import { Table, Checkbox } from "semantic-ui-react";
import format from "date-fns/format";

export default class TableRowWithSlider extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      exportSlider: false
    };
  }
  slider = () => {
    this.setState({ exportSlider: !this.state.exportSlider }, () => {
      console.log("slider --> ", this.state.exportSlider);
      const { id, slide } = this.props;
      slide({ id, isExported: this.state.exportSlider });
    });
  };

  render() {
    const { id, startTime, selfUri, status } = this.props;
    return (
      <React.Fragment>
        <Table.Row>
          <Checkbox slider onChange={this.slider} />
          <Table.Cell>{id}</Table.Cell>
          <Table.Cell>{format(startTime, "MMM Do YYYY, h:mm:ss A")}</Table.Cell>
          <Table.Cell>{selfUri}</Table.Cell>
          <Table.Cell>{status}</Table.Cell>
        </Table.Row>
      </React.Fragment>
    );
  }
}

查看沙箱以获得完整的解决方案：click。父组件保持存储应该导出的所有计划ID的状态。子组件AKA TableRowWithSlider调用它自己的幻灯片处理程序以及父级的幻灯片处理程序来传递它的id和toggle状态。

表体看起来像这样：

<Table.Body>
  {Object.values(schedules).map(
    ({ id, startTime, selfUri, status }) => {
      return (
        <TableRowWithSlider
          id={id}
          startTime={startTime}
          selfUri={selfUri}
          status={status}
          slide={this.slider.bind(this)}
        />
      );
    }
  )}
</Table.Body>

父母的幻灯片处理程序如下所示：

slider = ({ id, isExported }) => {
  if (isExported === true) {
    this.setState(
      {
        scheduleIdsToExport: [id, ...this.state.scheduleIdsToExport]
      },
      () => console.log(this.state.scheduleIdsToExport)
    );
  } else {
    const newArray = this.state.scheduleIdsToExport.filter(
      storedId => storedId !== id
    );
    this.setState(
      {
        scheduleIdsToExport: newArray
      },
      () => console.log(this.state.scheduleIdsToExport)
    );
  }
};

检查完整解决方案here