Css 突出显示“反应物料UI文本字段”；单元格“；在React Material UI表中？

我将React Material UI与TypeScript一起使用，我有一个Material UI表，该表的每一行都有一列Material TextFields。现在，当用户在文本字段中输入文本时，我想“突出显示”文本字段所在的整个表格单元格，而不仅仅是自动聚焦文本字段。我将如何做到这一点？看起来像这样：

---

您可以这样做，通过切换类直接操作DOM

导出默认函数App（）{
const handleFocus=（e:React.FocusEvent）=>{
文件
.querySelectorAll（“td”）
.forEach（（项）=>item.classList.remove（“聚焦”）；
e？.currentTarget？.closest（“td”）.classList.add（“聚焦”）；
};
返回(
);
}

你能给我们看看相关的HTMLT吗？这正是我需要的。唯一的问题是，我需要在文本字段更改后保持“突出显示”。因此，如果原始TextField值为10，我将其更改为15，则我需要单元格保持“高亮显示”，即使在我单击单元格后也是如此。只有当用户将TextField值恢复为原始值时，才会取消突出显示“已更改”单元格。因此，我应该使用

onChange

，而不是

onFocus

？我想我也需要一些东西来管理状态……啊，好的。在这种情况下，我建议您调查或。它们将管理一个

dirty

状态，跟踪用户是否更改了输入值。我可以使用react hook表单的formstate.dirtyfields跟踪更改字段的状态。我使用以下内容修改了handFocus函数以获得所需的功能：

constHandleFocus=（e:React.ChangeEvent）=>{if（！dirtyFields[e？.currentTarget？.id]）{document.querySelectorAll（“td”）.forEach（（item）=>item.classList.remove（“focused”）；}e？.currentTarget？.closest（“td”）.classList.add（“focused”）；}
export default function App() {
  const handleFocus = (e: React.FocusEvent) => {
    document
      .querySelectorAll("td")
      .forEach((item) => item.classList.remove("focused"));
    e?.currentTarget?.closest("td").classList.add("focused");
  };
  return (
    <div className="App">
      <Table>
        <TableBody>
          <TableRow>
            <TableCell>
              <TextField variant="outlined" onFocus={handleFocus} />
            </TableCell>
            <TableCell>
              <TextField variant="outlined" onFocus={handleFocus} />
            </TableCell>
            <TableCell>
              <TextField variant="outlined" onFocus={handleFocus} />
            </TableCell>
          </TableRow>
        </TableBody>
      </Table>
    </div>
  );
}