Реагировать Ячейки таблицы распределения фишек с рядами 5 ячеек - PullRequest
Новая
       15

Реагировать Ячейки таблицы распределения фишек с рядами 5 ячеек

0 голосов
/ 07 ноября 2019

Я хочу создать таблицу в своем функциональном компоненте React с использованием хуков и пользовательского интерфейса реагирующего материала. У меня есть массив строк, и я хочу создать чип для каждой строки в ячейке таблицы, например: 

<TableCell>
     <Chip
        key={index}
        className={classes.chips}
        size="large"
        label={user}
        icon={<AccountCircleIcon className={classes.closeIcon}/>}
      />
 </TableCell>

Я отображаю массив чипов с 

<div className={classes.chipContainer}> {Object.values(selectedUsersToDelete).map((user, index) => {
      return (
        <TableRow>
        <TableCell>
          <Chip
            key={index}
            className={classes.chips}
            size="large"
            label={user}
            icon={<AccountCircleIcon className={classes.closeIcon}/>}
          />
        </TableCell><TableCell>
          <Chip
            key={index}
            className={classes.chips}
            size="large"
            label={user}
            icon={<AccountCircleIcon className={classes.closeIcon}/>}
          />
        </TableCell>
        </TableRow>
      )
    })}

    </div>

где selectedUsersToDeleteэто значение useState.

Я пробовал каждый способ зацикливания значений в selectedUsersToDelete, но я не могу отреагировать на рендеринг таблицы со строками таблицы шириной 5 ячеек!

Также добавляюdeleteIcon и deletehandler для чипа разбивают их.

Я пытаюсь адаптировать этот урок для использования ловушек: tut

1 Ответ

1 голос
/ 07 ноября 2019 
import React, { useState, useEffect } from 'react';

// You'll need to add correct paths below
import AccountCircleIcon from './AccountCircleIcon';
import TableCell from './TableCell';
import TableRow from './TableRow';
import Chip from './Chip';

const ChipContainer = props => {
  // State is initialized here
  const [selectedUsersToDelete, setSelectedUsersToDelete] = useState([]);

  // Props destructred
  const { classes } = props;

  // Just an example showing how you can set state once componnent has mounted
  useEffect(
    () =>
      void setSelectedUsersToDelete([
        'user1',
        'user2',
        'user3',
        'user4',
        'user5'
      ]),
    []
  );

  return (
    <div className={classes.chipContainer}>
      <TableRow>
        {selectedUsersToDelete.map((user, index) => (
          <TableCell>
            <Chip
              key={index}
              className={classes.chips}
              size="large"
              label={user}
              icon={<AccountCircleIcon className={classes.closeIcon} />}
            />
          </TableCell>
        ))}
      </TableRow>
    </div>
  );
};

export default ChipContainer;
...