Попытка использовать ползунок и вводить в отдельные ячейки таблицы реакций одни и те же данные. - PullRequest
0 голосов
/ 29 апреля 2020

Мне бы хотелось, чтобы ползунок и поле ввода находились в отдельных ячейках в реактивной таблице, обе они изменяли одни и те же данные. Я думаю, что перетаскивание ползунка приводит к тому, что компонент удаляется и воссоздается, в результате чего поведение перетаскивания останавливается.
Есть ли способ сохранить ползунок для перетаскивания при динамическом обновлении поля ввода? Я не прав в том, как я понимаю, в чем проблема?

код столбца, лишенный материала, который, кажется, не связан с проблемой:

  const columns = useMemo(
    () => [
      {
        id: 'input',
        Header: 'input',
        accessor: 'hours',
        Cell: ({ cell }) => <HoursInput hours={cell.value} />,
      },
      {
        id: 'slider-bars',
        Header: 'slider',
        accessor: 'hours',
        Cell: ({ cell }) => (
          <Slider
            onChange={(event, newValue) =>
              handleSliderBarChange(cell.row.original.id, newValue)
            }
            value={cell.value}
          />
        ),
      },
    ],
    [],
  );

макет таблицы:

        <thead>
          {headerGroups.reduce((parentAcc, headerGroup) => {
            parentAcc.push(
              <tr {...headerGroup.getHeaderGroupProps()}>
                {headerGroup.headers.reduce((acc, column) => {
                    acc.push(
                      <th {...column.getHeaderProps()}>{column.render('Header')}</th>,
                    );
                  return acc;
                }, [])}
              </tr>,
            );
            return parentAcc;
          }, [])}
        </thead>
        <tbody {...getTableBodyProps()}>
          {rows.map((row, i) => {
            prepareRow(row);
            return (
              <tr {...row.getRowProps()}>
                {row.cells.map((cell) => (
                  <td {...cell.getCellProps()}>{cell.render('Cell')}</td>
                ))}
              </tr>
            );
          })}
        </tbody>
      </StyledTable>

Любая помощь будет оценена.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...