如何更改材质UI表中特定单元格中的按钮颜色和名称

Question

我使用Material Table显示我的数据。这里看起来像，https://i.postimg.cc/4x6hbm5N/image.png

我在上面的代码中声明了一个state

const [sharedOrdersList, setShareOrdersList] = useState([])

当User点击Share按钮时，我将Order Id推到sharedOrdersList。它的工作原理。但现在我的问题是我想改变按钮名称为UnShare和按钮颜色为另一种颜色。我尝试了几种方法。但我不知道该怎么做

这是我的函数代码:

const shareOrderBtnClick = (orderID) => {
sharedOrdersList.push(orderID)
alert("share Btn Clicked")
console.log(sharedOrdersList)
}

返回代码:

allOrderDatas.map((row) => (
<TableRow>
<TableCell">
<Button variant="contained" 
onClick={()=>{shareOrderBtnClick(row.orderID)}}
style={{ backgroundColor:sharedOrdersList.includes(row.orderID)?"#59886B":"#D54062",}}> 
<ShareIcon />{sharedOrdersList.includes(row.orderID)?"UnShare":"Share"</Button>
</TableCell>
</TableRow>

我不知道如何更改表中行中单元格中的特定项。请给我一些解决办法。

Answer 1

react中的状态是不可变的。useState返回一个值和一个更新函数。你不能直接改变这个值。要更新状态，您需要使用新值调用setShareOrdersList函数。

在你的例子中

const shareOrderBtnClick = (orderID) => {
setShareOrdersList([... sharedOrdersList, orderID]); 
// OR BETTER
//   setShareOrdersList(prevState => [...prevState, orderID]);
}