时间戳

首页 > 解决方案 > 如何在reactjs中将布尔状态值false返回给父级

javascript - 如何在reactjs中将布尔状态值false返回给父级

问题描述

父.tsx

const [modal, setModal] = useState(false);
const [detail, setDetail] = useState({});
<confirmation state={setModal(true)} data={detail} />

确认

return (
    <SweetAlert
      show={state}
      success
      title="Confirm"
      onConfirm={() => {return !state}}
    >
      I did it!
    </SweetAlert>
  )

单击确认时如何将布尔状态返回为假值？因为我试图将值返回为 false，然后我尝试了这个onConfirm={() => {return !state}}，但它不起作用。

标签： javascriptreactjstypescriptnext.js

解决方案

首先，始终以大写字母开头您的组件。其次，一种简单的方法是将确认函数作为道具传递，然后使用。所以像：

<Confirmation state={setModal(true)} data={detail} onConfirm={() => setModal(false)} />

然后在Confirmation组件中使用该道具：

return (
    <SweetAlert
      show={state}
      success
      title="Confirm"
      onConfirm={onConfirm}
    >
      I did it!
    </SweetAlert>
  )

这既简单又干净，并使您的Confirmation组件更可重用，因为onConfirmprop 可以是任何东西

推荐阅读