reactjs - Material UI 对话框组件 - 如何显示它？

Question

我已经实现了一个 Material UI 表，现在需要在用户单击特定行时显示一个对话框。

Bellow 只是说明我在做什么的代码的一部分。它获取onClick 事件并调用handleCellClick 函数来处理该事件。句柄函数应该调用 ResponsiveDialog，它实际上是从 Material UI 截取的，但由于某种原因它没有被执行。

export const OrderScoreCell = (props) => {

  const { score, scoreDesc } = props

  const handleCellClick = (e) => {
    <ResponsiveDialog />
  }

  return (
    <>
      <TableCell onClick={handleCellClick} lign="left">
        <LightTooltip 
          title={`Risco ${scoreDesc}`} 
          placement="top-end"
          arrow  
          interactive 
          TransitionComponent={Fade} 
          TransitionProps={{ timeout: 600 }} 
          aria-label="score" 
        >

标签： reactjsmaterial-uidialog

Answer 1

问题

所有要渲染的 UI 都需要在函数组件返回中返回。从函数返回 JSX 文字仅在函数在返回中调用时才有效，而不是作为事件处理程序回调。

解决方案

添加由单击处理程序更新的本地状态并有条件地呈现对话框。

例子：

export const OrderScoreCell = ({ score, scoreDesc }) => {
  const [isOpen, setIsOpen] = React.useState(false);

  const handleCellClick = (e) => setIsOpen(true);

  return (
    <>
      <TableCell onClick={handleCellClick} lign="left">
        <LightTooltip 
          title={`Risco ${scoreDesc}`} 
          placement="top-end"
          arrow  
          interactive 
          TransitionComponent={Fade} 
          TransitionProps={{ timeout: 600 }} 
          aria-label="score" 
        >
      </TableCell >
      {isOpen && <ResponsiveDialog />}
    <>
  );
};