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

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

TableRowWithSlider

签出沙盒以获取完整的解决方案：click。父组件将保存应导出的所有计划ID的状态。子组件AKA <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>调用它自己的滑动处理程序以及父组件的滑动处理程序来传递其ID和切换状态。

表主体看起来像这样：

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

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

{{1}}

检查完整的解决方案here

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

1 个答案: