如何清除整个反应物料UI表内容

时间:2018-12-07 10:13:49

标签: javascript reactjs material-ui

我有一个表,当用户输入一些数据时,该表已填充,我想创建一个重置按钮,以便可以完全清除该表。

有没有办法从头开始编码功能? (例如,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>

2 个答案:

答案 0 :(得分:0)

将来发布以帮助他人时,我的解决方案是使用.deleteRow。

configFileProvider(
        [configFile(fileId: '605dae22-d459-4c9a-8d3c-f88d305195aa', variable: 'script')]) {
            sh(returnStatus: true, script: """python3.6 $script""")
            if (returnStatus != 0) {
                currentBuild.result = 'FAILED'
                slackSend channel: SLACK_CHANNEL, message: "Content Build and Validate FAILED for ${env.CONTENT_GIT_REPO} for Repository ${env.CONTENT_GIT_URL} by ${env.JOB_NAME} (<${env.BUILD_URL}|Open>)", color: 'warning', tokenCredentialId: 'slack-token'
            }
            else {
                slackSend channel: SLACK_CHANNEL, message: "Content Build and Validate Succeded for ${env.CONTENT_GIT_REPO} for Repository ${env.CONTENT_GIT_URL} by ${env.JOB_NAME} (<${env.BUILD_URL}|Open>)", color: 'success', tokenCredentialId: 'slack-token'
            }
        }

答案 1 :(得分:0)

您可以存储两个列表:

  • 显示的行列表
  • 所有可能行的列表

您的表格将仅显示显示的行,如下所示:

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设置为空列表。这种东西属于您的React组件的state