reactjs React钩子状态-如何在显示对话框后将其转换为初始状态

jjjwad0x  于 2023-01-12  发布在  React
关注(0)|答案(1)|浏览(123)

我创建了一个对话框组件,它工作正常,但是一旦关闭,当我单击同一个按钮时就无法再次打开它。显然,我没有使用挂钩状态,因为它应该是这样的,并且缺少一些初始状态
下面是代码。

export const OrderScoreCell = (props) => {
  const { orderDetail } = props;
  const [isOpen, setIsOpen] = useState(false);

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

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

pprl5pva1#

const handleCellClick = (e) => setIsOpen((prevState)=>!prevState);

这被称为功能更新。prevState是先前的状态。因此,如果它是打开的,则prevState将为true。您想要关闭它,则将其设置为not true(!prevState)。如果isOpen = true!prevState = false,则反之亦然。

相关问题