如何正确"重置"使用关闭模态反应时的状态JS

Question

我想解释一下我今天的问题。

目前我在这个模态中使用了一个模态。我选择了一个值，这是正确的。

我的问题和以下内容，当我单击取消按钮或十字键关闭时。如果我再次打开模态，则值在之前选择并仍然存在

当我点击取消或十字时，我想返回到它的初始状态当然，当我打开模式时，选择中没有值

我愿意接受任何提议，非常感谢。

ps:pleadsSelect中的选项是c的数据，ps2：可能是useeffect/prevStateReset to Initial State？

import React, { useState, useEffect } from "react"
function LeadModal({ isOpen, onClose }) {
const [leadId, setLeadId] = useState(null);
return (
<Modal
open={isOpen}
getOpen={onClose}
>
<PanelHeader>
<PanelTitle>
add lead
</PanelTitle>
<SvgIcon
onClick={onClose}
/>
</PanelHeader>
<PanelBody className="space-y-1 mb-2 ">
<Label>
Sélect lead
</Label>
<div>
<Select
options={leadsOptions}
placeholder="leads"
getValue={(values) => {
setleadId(values.value);
}}
value={leadId}
/>
</div>
</PanelBody>
<PanelFooter>
<div>
<Button onClick={onClose}>
Annuler
</Button>
</div>
</PanelFooter>
</>
</Modal>
);
}

Answer 1

再次打开模态时，没有清除状态数据。在关闭或取消模态或类似的操作之前，只需用初始值更新状态值。

<SvgIcon onClick={() => {setLeadId(null); onClose();}} />