Reactjs 反应材料表赢得'；单击时不渲染图标
我已经找了几天了。直到现在我才明白。 单击时，我希望我的可见性图标更改为隐藏。但我不知道为什么它不会自动渲染。我必须在搜索栏上键入一些内容才能取消图标的可见性 我阅读了文档，但它不起作用 还有这个 这是我的密码Reactjs 反应材料表赢得'；单击时不渲染图标,reactjs,material-ui,material-table,Reactjs,Material Ui,Material Table,我已经找了几天了。直到现在我才明白。 单击时，我希望我的可见性图标更改为隐藏。但我不知道为什么它不会自动渲染。我必须在搜索栏上键入一些内容才能取消图标的可见性 我阅读了文档，但它不起作用 还有这个 这是我的密码 (rowData) => ( rowData.isActive === 1 ? { icon: "visibility_off", tooltip
(rowData) => (
rowData.isActive === 1 ?
{
icon: "visibility_off",
tooltip: "Hide Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
/*// console.log(row.tableData.id);
//find index
console.log(data[row.tableData.id]);
//change the data value
data[row.tableData.id].isActive = 0;
//set data with new data
setData(data);*/
},
} :
{
icon: "visibility",
tooltip: "Show Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
},
}
const [tableConfig, setTableConfig] = useState({
columns:[
{ title: "ID", field: "processID" },
{ title: "Config Name", field: "configName" },
{ title: "Status", field: "processStatus" },
{ title: "Progress", field: "progressPercentage", type: "numeric" },
{ title: "Start Time", field: "lastStartDateTime", type: "datetime" },
{ title: "End Time", field: "lastEndDateTime", type: "datetime" },
{ title: "Total Input Records", field: "lastInputRecords", type: "numeric" },
{ title: "Total Output Records", field: "masterRecords", type: "numeric" },
],
data:[
{
processID: "191030070911880",
configName: "Test2333",
configDesc: "191030070911880 Test2333",
userID: "1",
createdDateTime: "2019-10-30 03:10:06.844",
lastModifiedDateTime: "2020-01-18 02:24:59.051",
isActive: 0,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:45.976",
lastEndDateTime: "2020-01-18 02:32:56.197",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030072229070",
configName: "Testimony2",
configDesc: "191030072229070 Testimony2",
userID: "1",
createdDateTime: "2019-10-30 03:22:34.732",
lastModifiedDateTime: "2019-10-30 03:22:34.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:36.533",
lastEndDateTime: "2020-01-18 02:32:36.566",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030084112873",
configName: "Testimony3",
configDesc: "191030084112873 Testimony3",
userID: "1",
createdDateTime: "2019-10-30 04:41:19.856",
lastModifiedDateTime: "2019-10-30 04:41:19.856",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:33:59.231",
lastEndDateTime: "2020-01-18 02:33:59.256",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191104084001318",
configName: "TestA",
configDesc: "191104084001318 TestA",
userID: "1",
createdDateTime: "2019-11-04 03:40:44.697",
lastModifiedDateTime: "2019-11-04 05:45:45.388",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:56.451",
lastEndDateTime: "2019-11-04 05:44:06.846",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191104084317062",
configName: "TestA1",
configDesc: "adv191104084317062 TestA1",
userID: "1",
createdDateTime: "2019-11-04 03:43:29.58",
lastModifiedDateTime: "2019-11-04 05:45:45.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:49.78",
lastEndDateTime: "2019-11-04 05:44:01.566",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191128105553518",
configName: "TestAAA",
configDesc: "adv191128105553518 TestAAA",
userID: "1",
createdDateTime: "2019-11-28 05:56:00.845",
lastModifiedDateTime: "2019-11-28 06:21:04.551",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:34:04.565",
lastEndDateTime: "2020-01-18 02:34:15.933",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
}
],
actions:[
{
icon: "play_arrow",
tooltip: "Run",
onClick: () => {
console.log("run button is clicked");
}
},
{
icon: "description",
tooltip: "Summary",
onClick: () => {
console.log("summary button is clicked");
}
},
{
icon: "edit",
tooltip: "Edit",
onClick: (event, row) => {
// console.log(row.tableData.id);
//cari indeks
/*console.log(data[row.tableData.id]);
//ganti data yang mau diganti
data[row.tableData.id].configName = "ase";
//mengembalikan data dengan isi yang sama persis seperti sebelumnya
setData(data);*/
}
},
{
icon: "file_copy",
tooltip: "Clone",
onClick: () => {
console.log("clone button is clicked");
}
},
{
icon: "delete",
tooltip: "Delete",
onClick: () => {
console.log("Delete button is clicked");
}
},
(rowData) => (
rowData.isActive === 1 ?
{
icon: "visibility_off",
tooltip: "Hide Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
/*// console.log(row.tableData.id);
//cari indeks
console.log(data[row.tableData.id]);
//ganti data yang mau diganti
data[row.tableData.id].isActive = 0;
//mengembalikan data dengan isi yang sama persis seperti sebelumnya
setData(data);*/
},
} :
{
icon: "visibility",
tooltip: "Show Row",
onClick: () => {
console.log(rowData);
// console.log(event);
// console.log(row.isActive);
console.log(tableConfig.data[rowData.tableData.id].isActive);
console.log(rowData.tableData.id);
tableConfig.data[rowData.tableData.id].isActive = !tableConfig.data[rowData.tableData.id].isActive;
setTableConfig(tableConfig);
// console.log(row.isActive);
},
}
)
]
});
NB：因为我的名声。我不能在这里张贴图片。抱歉首先，您可以分离操作数组
const actions = [
{
icon: "description",
tooltip: "Run",
onClick: () => {
console.log("run button is clicked");
}
},
{
icon: "description",
tooltip: "Summary",
onClick: () => {
console.log("summary button is clicked");
}
},
{
icon: "edit",
tooltip: "Edit",
onClick: (event, row) => { }
}, {
icon: "visibility_off",
tooltip: "Hide Row",
onClick: () => { },
},
(rowData) => {
return {
icon: rowData.isActive === 1 ? 'visibility_off' : 'visibility',
tooltip: "Hide Row",
onClick: (event, row) => {
clickHandler(row)
}
}
}
];
const [tableConfig, setTableConfig] = React.useState({
columns: [
{ title: "ID", field: "processID" },
{ title: "Config Name", field: "configName" },
{ title: "Status", field: "processStatus" },
{ title: "Progress", field: "progressPercentage", type: "numeric" },
{ title: "Start Time", field: "lastStartDateTime", type: "datetime" },
{ title: "End Time", field: "lastEndDateTime", type: "datetime" },
{ title: "Total Input Records", field: "lastInputRecords", type: "numeric" },
{ title: "Total Output Records", field: "masterRecords", type: "numeric" },
],
data: [
{
processID: "191030070911880",
configName: "Test2333",
configDesc: "191030070911880 Test2333",
userID: "1",
createdDateTime: "2019-10-30 03:10:06.844",
lastModifiedDateTime: "2020-01-18 02:24:59.051",
isActive: 0,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:45.976",
lastEndDateTime: "2020-01-18 02:32:56.197",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030072229070",
configName: "Testimony2",
configDesc: "191030072229070 Testimony2",
userID: "1",
createdDateTime: "2019-10-30 03:22:34.732",
lastModifiedDateTime: "2019-10-30 03:22:34.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:36.533",
lastEndDateTime: "2020-01-18 02:32:36.566",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030084112873",
configName: "Testimony3",
configDesc: "191030084112873 Testimony3",
userID: "1",
createdDateTime: "2019-10-30 04:41:19.856",
lastModifiedDateTime: "2019-10-30 04:41:19.856",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:33:59.231",
lastEndDateTime: "2020-01-18 02:33:59.256",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191104084001318",
configName: "TestA",
configDesc: "191104084001318 TestA",
userID: "1",
createdDateTime: "2019-11-04 03:40:44.697",
lastModifiedDateTime: "2019-11-04 05:45:45.388",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:56.451",
lastEndDateTime: "2019-11-04 05:44:06.846",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191104084317062",
configName: "TestA1",
configDesc: "adv191104084317062 TestA1",
userID: "1",
createdDateTime: "2019-11-04 03:43:29.58",
lastModifiedDateTime: "2019-11-04 05:45:45.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:49.78",
lastEndDateTime: "2019-11-04 05:44:01.566",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191128105553518",
configName: "TestAAA",
configDesc: "adv191128105553518 TestAAA",
userID: "1",
createdDateTime: "2019-11-28 05:56:00.845",
lastModifiedDateTime: "2019-11-28 06:21:04.551",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:34:04.565",
lastEndDateTime: "2020-01-18 02:34:15.933",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
}
],
});
clikHandler（）const clickHandler = (rowData) => {
setTableConfig({
columns: [...tableConfig.columns],
data: tableConfig.data.map((item, index) => {
if (index !== rowData.tableData.id) {
return { ...item }
}
return {
...item,
isActive: item.isActive === 1 ? 0 : 1
}
})
});
}
actions={actions}在功能组件中，setState并不假装合并整个状态。您必须合并自己。首先，您可以分离操作数组
const actions = [
{
icon: "description",
tooltip: "Run",
onClick: () => {
console.log("run button is clicked");
}
},
{
icon: "description",
tooltip: "Summary",
onClick: () => {
console.log("summary button is clicked");
}
},
{
icon: "edit",
tooltip: "Edit",
onClick: (event, row) => { }
}, {
icon: "visibility_off",
tooltip: "Hide Row",
onClick: () => { },
},
(rowData) => {
return {
icon: rowData.isActive === 1 ? 'visibility_off' : 'visibility',
tooltip: "Hide Row",
onClick: (event, row) => {
clickHandler(row)
}
}
}
];
const [tableConfig, setTableConfig] = React.useState({
columns: [
{ title: "ID", field: "processID" },
{ title: "Config Name", field: "configName" },
{ title: "Status", field: "processStatus" },
{ title: "Progress", field: "progressPercentage", type: "numeric" },
{ title: "Start Time", field: "lastStartDateTime", type: "datetime" },
{ title: "End Time", field: "lastEndDateTime", type: "datetime" },
{ title: "Total Input Records", field: "lastInputRecords", type: "numeric" },
{ title: "Total Output Records", field: "masterRecords", type: "numeric" },
],
data: [
{
processID: "191030070911880",
configName: "Test2333",
configDesc: "191030070911880 Test2333",
userID: "1",
createdDateTime: "2019-10-30 03:10:06.844",
lastModifiedDateTime: "2020-01-18 02:24:59.051",
isActive: 0,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:45.976",
lastEndDateTime: "2020-01-18 02:32:56.197",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030072229070",
configName: "Testimony2",
configDesc: "191030072229070 Testimony2",
userID: "1",
createdDateTime: "2019-10-30 03:22:34.732",
lastModifiedDateTime: "2019-10-30 03:22:34.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:32:36.533",
lastEndDateTime: "2020-01-18 02:32:36.566",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191030084112873",
configName: "Testimony3",
configDesc: "191030084112873 Testimony3",
userID: "1",
createdDateTime: "2019-10-30 04:41:19.856",
lastModifiedDateTime: "2019-10-30 04:41:19.856",
isActive: 1,
lastEditUserID: "1",
processStatus: "error",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:33:59.231",
lastEndDateTime: "2020-01-18 02:33:59.256",
lastInputRecords: 15,
masterRecords: 0,
systemConfig: null,
dedupConfig: null
},
{
processID: "191104084001318",
configName: "TestA",
configDesc: "191104084001318 TestA",
userID: "1",
createdDateTime: "2019-11-04 03:40:44.697",
lastModifiedDateTime: "2019-11-04 05:45:45.388",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:56.451",
lastEndDateTime: "2019-11-04 05:44:06.846",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191104084317062",
configName: "TestA1",
configDesc: "adv191104084317062 TestA1",
userID: "1",
createdDateTime: "2019-11-04 03:43:29.58",
lastModifiedDateTime: "2019-11-04 05:45:45.732",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2019-11-04 05:43:49.78",
lastEndDateTime: "2019-11-04 05:44:01.566",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
},
{
processID: "adv191128105553518",
configName: "TestAAA",
configDesc: "adv191128105553518 TestAAA",
userID: "1",
createdDateTime: "2019-11-28 05:56:00.845",
lastModifiedDateTime: "2019-11-28 06:21:04.551",
isActive: 1,
lastEditUserID: "1",
processStatus: "success",
progressPercentage: 0,
lastStartDateTime: "2020-01-18 02:34:04.565",
lastEndDateTime: "2020-01-18 02:34:15.933",
lastInputRecords: 15,
masterRecords: 15,
systemConfig: null,
dedupConfig: null
}
],
});
clikHandler（）const clickHandler = (rowData) => {
setTableConfig({
columns: [...tableConfig.columns],
data: tableConfig.data.map((item, index) => {
if (index !== rowData.tableData.id) {
return { ...item }
}
return {
...item,
isActive: item.isActive === 1 ? 0 : 1
}
})
});
}
actions={actions}在功能组件中，setState并不假装合并整个状态。您必须合并自己。共享列状态或JSX部分的代码？您可以共享您的全部代码吗？您可以共享列状态或JSX部分的代码吗？你能分享你的全部代码吗？没有问题，你可以标记为“为其他人解决：）谢谢你的有用回答。那么，如果我想更改图标顺序，我该如何处理？我想将删除操作视为表中的最后一列。没问题，您可以将其标记为“为其他人解决：）谢谢您的有用回答。如果我想更改图标顺序，我该如何处理？我想将删除操作作为表中的最后一列。