是否在React Material UI表中突出显示React Material UI TextField "Cell“？
是否在React Material UI表中突出显示React Material UI TextField "Cell“？
提问于 2020-10-29 04:49:46
我将React Material UI与TypeScript一起使用，我有一个Material UI表，在该列的每一行中都有一列Material TextFields。现在，当用户在textfield中输入文本时，我想“突出显示”TextField所在的整个表单元格，而不仅仅是自动聚焦在textfield上。我该如何做到这一点？看起来像这样：
回答 1
Stack Overflow用户
回答已采纳
发布于 2020-10-30 00:07:40
您可以这样做，您只需通过切换类来直接操作DOM。
https://codesandbox.io/s/select-table-cell-on-focus-cvime
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>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64581087
复制相关文章
相似问题
腾讯云开发者
