Question

我正在尝试创建带有开关的材料表，该onclick会更改组件的状态。

这是带有表的组件，它具有父组件的状态作为道具。我将行变量传递给物料表数据属性。开关是自定义呈现字段。每当我单击它时，它都会触发changeRow，它会发现rows中的行索引变数并将其更改并保存到新变量中。然后调用ChangeRows以更改状态。问题是，开关没有改变。即使我可以清楚地看到控制台中的新状态，看起来也没有任何反应。

const StuffTable = ({rows, changeRows}) => {

const changeRow = (oldRow, e) => {
    const changeData = {[e.target.name]: e.target.checked};
    const newRow = {...oldRow, ...changeData};

    console.log(oldRow, e);

    const index = rows.findIndex(dtaRow => dtaRow.id === oldRow.id);
    const newData = rows;
    newData[index] = newRow;

    console.log(newData);
    changeRows(newData);
};

return (
    <Container maxWidth="lg">
        <Button onClick={() => { changeRow({id: 6}, { target: {name: 'borrowable', checked: true} }) }}>klikni</Button>
        <MaterialTable
            options={{
                actionsColumnIndex: -1,
                search: true,
                exportButton: true,
                exportDelimiter: ";"
            }}
            actions={[
                {
                    icon: 'edit',
                    tooltip: 'Edit Study',
                    onClick: (event, rowData) => alert("Do you want to edit?")
                }]}
            columns={[
                { title: "Název", field: "title" },
                { title: "Stav", field: "status", render: (data) => <Chip label={data.status} color="primary" avatar={<Avatar src="/static/images/avatar/1.jpg" />} /> },
                { title: "Půjčovat", field: "borrowable", render: (data, id) => (<FormControlLabel control={<Switch checked={data.borrowable} onChange={(e) => changeRow(data, e)} name="borrowable" color="primary"/>} label={data.borrowable ? 'půjčovat' : 'nepůjčovat'} />) },
                { title: "Vidí všichni", field: "active", render: (data, id) => (<FormControlLabel control={<Switch checked={data.borrowable} onChange={(e) => changeRow(data, e)} name="borrowable" color="primary"/>} label={data.borrowable ? 'půjčovat' : 'nepůjčovat'} />) },
                { title: "Uskladněno", field: "location" },
            ]}
            data={rows}
            title="Moje věci"
        />
    </Container>
);
};

 export default StuffTable;

我尝试添加按钮，该按钮在单击时将状态更改为空数组，并且表格未显示任何内容。但是当我使用此按钮触发changeRow（模型数据）时，结果是相同的-开关上没有任何更改。

import React, {useEffect, useState} from 'react';

从“ ../components/stuffTable”中导入StuffTable；

让行= [ {id：5，标题：“prošívanice”，可借用：false，姓氏：“ Baran”，状态：“zapůjčeno”，位置：“ Praha”}， {id：6，标题：“prošívanice2”，可借用：false，姓氏：“ Baran”，状态：“zapůjčeno”，位置：“ Praha”}， {id：7，标题：“prošívanice3”，可借用：false，姓氏：“ Baran”，状态：“zapůjčeno”，位置：“布尔诺”} ];

这是父级组件

const MyStuffPage = () => {

    const [data, setData] = useState(rows);

    return (
        <div>
            <StuffTable rows={data} changeRows={(data) => {setData(data); console.log("hou",data);}} />
        </div>
    );
};

export default MyStuffPage;

这里是Codesandbox出现此问题： https://codesandbox.io/s/festive-gould-i1jf7

Answer 1

每当您要呈现新数据或向数据表声明状态时，都需要调用onQueryChange，进行以下更改：在开始时创建一个像这样的裁判：

const tableRef = useRef(null);

然后在材料表中使用它：

<MaterialTable
   //add this
   tableRef={tableRef}
   options={{
     actionsColumnIndex: -1,
     search: true,
     exportButton: true,
     exportDelimiter: ";"
   }}

然后在更新开始和必要的工作后，在您的changeRow函数中添加以下内容：

tableRef.current.onQueryChange()

这将告诉表格以正确的开关状态呈现新数据

无法打开材料表中的开关

1 个答案: