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

Question

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

Bellow 只是说明我正在做的事情的代码的一部分。它获取 onClick 事件并调用 handleCellClick 函数来处理该事件。 handle 函数应该调用 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" 
        >

Answer 1

问题

您想要呈现的所有 UI 都需要 return 在函数组件 return 中编辑。从函数返回 JSX 文字仅在函数在 return 中调用时有效，而不是作为事件处理程序回调。

解决方案

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

示例：

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 />}
    <>
  );
};

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

Material UI Dialog Component - How to show it?

dialog

reactjs

material-ui

问题

解决方案