物料表:reactjs物料表中的onclick自定义添加按钮throwig错误

时间:2020-10-30 05:22:25

标签: javascript reactjs material-ui material-table

我在我的项目中使用物料表,并且存在一种情况,默认情况下所有行复选框都为true,并且用户可以取消选择是否希望在步进器中移至下一步。此外,我还可以添加新行。当前步骤中的按钮。但是,当我选中一个复选框,然后单击添加时,就会引发错误。谁能解释为什么。它发生了。?

我要附加代码和框代码: https://codesandbox.io/s/material-table-add-mode-from-action-button-in-table-cell-forked-x5lb0?file=/src/App.js

enter image description here

<MaterialTable
        tableRef={tableRef}
        columns={tableColumns}
        data={tableData}
        title="Custom Add Mode"
        options={{
          search: false,
          selection: true,
          selectionProps: (rowData) => ({
            checked: true
          }),
          showTitle: false,
          toolbar: false,
          rowStyle: {
            fontSize: 12
          },

          headerStyle: {
            backgroundColor: "#F5F7FE",
            color: "#8C98A9",
            fontSize: "12px"
          },
          paging: false
        }}
        components={{
          Action: (props) => {
            //If isn't the add action
            if (
              typeof props.action === typeof Function ||
              props.action.tooltip !== "Add"
            ) {
              return <MTableAction {...props} />;
            } else {
              return <div ref={addActionRef} onClick={props.action.onClick} />;
            }
          }
        }}
        actions={[
          {
            icon: "save",
            tooltip: "Save User",
            onClick: (event, rowData) => alert("You saved " + rowData.name)
          }
        ]}
        editable={{
          onRowAdd: (newData) =>
            Promise.resolve(setTableData([...tableData, newData]))
        }}
      />
      <div>
        <button onClick={() => addActionRef.current.click()}>Add New</button>
      </div>
    </>

0 个答案:

没有答案