Как очистить весь реактивный материал пользовательского интерфейса таблицы

Question

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

Есть ли способ сделать это без функций кодирования с нуля?(например, clearLayers () для очистки карты листовок)

Спасибо.Редактировать: добавлен пример кода

//this array is dynamically inputted & can have as many rows as user wants
    arrayNum = [
    {1, chair, test, blue, sky, 1000}
    {2, hair, test, orange, stars, 100}
    {3, bair, test, yellow, moon, 10000}
    {4, care, test, red, sun, 86399}
    ]

    addToTable(res) {
    rows.push (
       <TableRow> 
          <TableCell> {res} </TableCell>
       </TableRow>
    }

    //inside handleClick
    for ( var i = 0; i<arrayNum.length; i++)
    {
     //some more code
     addToTable(arrayNum(i));
    }

   //button using handleClick onClick
   <Table>
      <TableHead>
         //static header values
      </TableHead>
      <TableBody>
         {rows}
      </TableBody
   </Table>

Answer 1

Вы можете сохранить два списка:

• список отображаемых строк
• список всех возможных строк

Ваша таблица будет затем отображать только отображаемые строки, подобные этой:

render() {
  const rows = [
    [1, 'abc'],
    [2, 'def'],
    [3, 'ghi']
  ];
  const displayedRows = [rows[0], rows[1]];
  return (
    <Table>
      // more components here...
      <TableBody>
        {displayedRows.map((row) =>
           <TableRow key={row[0]}>
             <TableCell>{row[0]}</TableCell>
             <TableCell>{row[1]}</TableCell>
           </TableRow>
        )}
      </TableBody>
    </Table>
  );
}

Затем вы можете установить displayedRows в пустой список.Этот тип материала входит в state вашего компонента React.

Answer 2

Отправляя сообщения, чтобы помочь другим в будущем, я решил использовать .deleteRow.

var table = document.getElementById("TableID");
for(var i = table.rows.length - 1; i > 0; i--)
{
    table.deleteRow(i);
}