Question

这是react打字稿中材料ui的代码。我正在尝试在底部添加一个按钮，单击该按钮会导致形成表单，但是尝试了许多操作之后，我仍然不知道该怎么做？我只需要在底部有一个简单的按钮，就可以得到任何帮助

这是网站上的代码

import React from 'react';
import MaterialTable, { Column } from 'material-table';

interface Row {
  name: string;
  surname: string;
  birthYear: number;
  birthCity: number;
}

interface TableState {
  columns: Array<Column<Row>>;
  data: Row[];
}

export default function MaterialTableDemo() {
  const [state, setState] = React.useState<TableState>({
    columns: [
      { title: 'Name', field: 'name' },
      { title: 'Surname', field: 'surname' },
      { title: 'Birth Year', field: 'birthYear', type: 'numeric' },
      {
        title: 'Birth Place',
        field: 'birthCity',
        lookup: { 34: 'İstanbul', 63: 'Şanlıurfa' },
      },
    ],
    data: [
      { name: 'Mehmet', surname: 'Baran', birthYear: 1987, birthCity: 63 },
      {
        name: 'Zerya Betül',
        surname: 'Baran',
        birthYear: 2017,
        birthCity: 34,
      },
    ],
  });

  return (
    <MaterialTable
      title="Editable Example"
      columns={state.columns}
      data={state.data}
      editable={{
        onRowAdd: (newData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              setState((prevState) => {
                const data = [...prevState.data];
                data.push(newData);
                return { ...prevState, data };
              });
            }, 600);
          }),
        onRowUpdate: (newData, oldData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              if (oldData) {
                setState((prevState) => {
                  const data = [...prevState.data];
                  data[data.indexOf(oldData)] = newData;
                  return { ...prevState, data };
                });
              }
            }, 600);
          }),
        onRowDelete: (oldData) =>
          new Promise((resolve) => {
            setTimeout(() => {
              resolve();
              setState((prevState) => {
                const data = [...prevState.data];
                data.splice(data.indexOf(oldData), 1);
                return { ...prevState, data };
              });
            }, 600);
          }),
      }}
    />
  );
}

这是我希望按钮看起来像的样子：

Answer 1

您可以拥有一个同时返回MaterialTableDemo和按钮的组件。

您可以将它们都包装在div中，也可以使用React.Fragment对其进行内联。

function TableWithButton() {
  return (
    <>
      <MaterialTableDemo />
      <div style={{ width: '100%', textAlign: 'center'}}>
        <Button onClick={navigateToForm}>Button</Button>
      </div>
    </>
  );
}

这里是an example

如何在底部的材料UI表中添加按钮？

1 个答案: