Реагировать - переместить строку данных в новую таблицу на основе флажка - PullRequest
Новая
       6

Реагировать - переместить строку данных в новую таблицу на основе флажка

1 голос
/ 02 апреля 2019

У меня есть таблица расписаний, которая заполняется серией вызовов 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 и добавить их в новую таблицу для экспорта?

У меня есть песочница с кодом здесь , которая имеет несколько расписаний и функциональность ползунка.

1 Ответ

1 голос
/ 02 апреля 2019

Вы можете абстрагировать строку таблицы в отдельный компонент.Затем вы можете настроить каждую дорожку на свое собственное состояние ползунка.Примером такого компонента может быть следующий: 

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

Проверьте песочницу для полного решения: щелкните .Родительский компонент хранит состояние всех идентификаторов расписания, которые должны быть экспортированы.Дочерний компонент AKA TableRowWithSlider вызывает собственный обработчик слайдов, а также обработчик слайдов родителя для передачи своего идентификатора и состояния переключения.

Тело таблицы выглядит следующим образом: 

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

Проверить полное решение здесь

...