React Table 7 - Как изменить состояние отдельной кнопки, созданной динамически с помощью React-Table API - PullRequest
Новая
       32

React Table 7 - Как изменить состояние отдельной кнопки, созданной динамически с помощью React-Table API

0 голосов
/ 20 апреля 2020

Я использую React Table 7 для создания таблицы, в которой первая ячейка каждой строки представляет собой кнопку ChecOut / CheckIn. Моя цель - создать инструмент, с помощью которого люди смогут проверять оборудование CheckOut и CheckIn. My React Table CodeSandbox

Идея состоит в том, что когда пользователь нажимает кнопку, она изменится с "CheckOut" на "CheckIn" и наоборот. Это также изменит color строки при выписке. Я смог выполнить sh с помощью JQuery (код находится в песочнице под функциональным компонентом App ()), но хочу избежать этого и уверен, что это легко выполнимо в ответ.

Моя проблема заключается в изменении состояния отдельной кнопки и в каком функциональном компоненте ее следует определять. Элементы <Button> создаются динамически в React-Table, определенной в объекте столбцов под функциональным компонентом приложения. 

      {
        Header: "CheckIn/Out",
        Cell: ({ row }) => (
          <Button
            key={row.id}
            id={row.id}
            onClick={e => checkClick(e)}
            value={checkButton.value}
          >
            {checkButton.value}
          </Button>
        )
      }

Я попытался передать функцию в атрибут onChnage элемента <Button>. В этой функции я обновил состояние <Button>, чтобы изменить строковое значение с "CheckOut" на "CheckIn", но это не работает. Сначала это изменило имя (состояние) всех элементов <Button>. Не уверен, будет ли состояние жить в компоненте App () или функциональном компоненте TableRe (). Или мне вообще нужно использовать состояние?

Я в основном построил это поверх редактируемого кода таблицы, доступного на веб-сайте React-Table Код редактируемой таблицы React-таблицы , раздел примеров Примеры таблиц реакций .

Любая помощь очень ценится!

data. js

import React from "react";

// export default random => {
//   let arr = [];
//   for (let i = 0; i < random; i++) {
//     arr.push({
//       first: chance.name(),
//       last: chance.last(),
//       birthday: chance.birthday({ string: true }),
//       zip: chance.zip()
//     });
//   }
//   return arr;
// };

const temp_data = [
  {
    firstName: "johny",
    lastName: "Bravo",
    age: "23",
    visits: "45",
    progress: "complete",
    status: "all done"
  },
  {
    firstName: "johny",
    lastName: "Bravo",
    age: "23",
    visits: "45",
    progress: "complete",
    status: "all done"
  }
];

const ArrayData = () => {
  const data = temp_data.map(item => {
    return {
      firstName: item.firstName,
      lastName: item.lastName,
      age: item.age,
      visits: item.visits,
      progress: item.progress,
      status: item.status
    };
  });
  return data;
};

// Do not think there is any need to memoize this data since the headers
// function TempData() {
//   const data = React.useMemo(ArrayData, []);
//   return data;
// }

export default ArrayData;
...