小编JS3*_*JS3的帖子

我正在使用 mui-datatable，其中 onRowClick 将引导用户到另一个页面。我还在每一行都有自定义操作按钮。但是，如果我单击自定义操作按钮，它还会触发 onRowClick，从而将用户引导到另一个页面。单击自定义操作按钮时如何防止 onRowClick？

class orders extends Component {
  constructor() {
    super();
    this.state = { orders: [] };
  }

  handleRowClick = (rowData, rowMeta) => {
    this.props.history.push("/details", `${rowData[0]}`);
  };

  columns = [
    "Order ID",
    "Items",
    "Address",
    "Total Amount",
    {
      name: "Action Button",
      options: {
        filter: true,
        sort: false,
        empty: true,
        customBodyRender: (value, tableMeta) => {
          return (
            <FormControlLabel
              value={value}
              control={
                <Button
                  value={value}                >
                  Action Button
                </Button>
              }
              onClick={(e) => {
                //firestore codes
              }}
            />
          );
        },
      },
    },
  ]; …

我有这个 Material-UI DataGrid，如何对“总金额”列的所有值求和，一旦触发过滤器，该列的值也会更新？

我真的不确定如何对整个列的总金额进行求和。任何帮助，将不胜感激。谢谢

代码：

  const [filterModel, setFilterModel] = React.useState({
    items: [
      {
        columnField: "totalAmount",
        operatorValue: ">",
        value: "200"
      }
    ]
  });

  return (
    <div style={{ height: 400, width: "100%" }}>
      <DataGrid
        // rows={rows}
        columns={columns}
        rows={data}
        components={{
          Toolbar: GridToolbar
        }}
        filterModel={filterModel}
        onFilterModelChange={(newFilterModel) => setFilterModel(newFilterModel)}
      />
    </div>
  );
}

有 3 个选项卡，我无法将它们放在屏幕中央。如何使可滚动选项卡居中？截至目前，它只会出现在屏幕的左侧

codesandbox：https://codesandbox.io/s/material-demo-forked-dbcxl?file =/demo.js

下面是代码：

import * as React from "react";
import Tabs from "@mui/material/Tabs";
import Tab from "@mui/material/Tab";
import Box from "@mui/material/Box";

export default function ScrollableTabsButtonAuto() {
  const [value, setValue] = React.useState(0);

  const handleChange = (event, newValue) => {
    setValue(newValue);
  };

  return (
    <Tabs
      value={value}
      onChange={handleChange}
      variant="scrollable"
      scrollButtons="auto"
      aria-label="scrollable auto tabs example"
      centered
    >
      <Tab label="Item One" />
      <Tab label="Item Two" />
      <Tab label="Item Three" />
    </Tabs>
  );
}

我有从 获得的数据formData，我希望将其传递给发送电子邮件的功能。

错误：

Type 'FormDataEntryValue' is not assignable to type 'string | null'.ts(2322)
definitions.ts(119, 3): The expected type comes from property 'lastName' which is declared here on type 'InvoiceEmailData'
(property) lastName: string | null
No quick fixes available

InvoiceEmailDatafor firstName、lastName和上发生错误remarks。

'use server'


export default async function addCustomerOrder(cart: any, total: number, formData: FormData): Promise<{ message: string }> {     
    const cookieStore = cookies()
    const supabase = createServerActionClient({ cookies: () => cookieStore })

    let order_id; …

我已经安装了 React Chart JS 2 但仍然有这种错误

./node_modules/react-chartjs-2/dist/index.modern.js 找不到模块：无法解析“chart.js”

这是我的 package.json 文件

条形图.js

import React from "react";
import { Bar } from "react-chartjs-2";

const state = {
  labels: ["Nausea", "Fever", "Muscle Pain"],
  datasets: [
    {
      label: "1st Dose",
      backgroundColor: "rgba(75,192,192,1)",
      borderColor: "rgba(0,0,0,1)",
      borderWidth: 2,
      data: [65, 59, 80],
    },
    {
      label: "2st Dose",
      backgroundColor: "red",
      borderColor: "rgba(0,0,0,1)",
      borderWidth: 2,
      data: [30, 20, 10],
    },
  ],
};

export default class Barchart extends React.Component {
  render() {
    return (
      <div>
        <Bar
          data={state}
          options={{ …