如何重置reactjs中的模态state

Question

我有一个模态，输入字段在模态内部。 它有一个名为 add id 的输入字段。 它的工作原理是，如果该 id 存在于后端，我将在其他两个输入字段中获取姓名和职业。 这段代码工作正常。 但每次我打开我的模态。 我想要模态的重置 state，但不是之前的 state。我正在为此使用功能组件。 不确定如何重置模态 state。无法共享完整代码，因为它很复杂，但可以共享一些代码，如果有人可以帮助我。 这会很棒。

const handleIdValidation = () => {
//handle the code after user enters the id   
  };

<Modal (it contains props to toggle modal and handle submit request)>
    <>
        <TextInput
          type="text"
          name = "id"
          onKeyPress={(event) => {
            if (event.key === "Enter") {
              handleIdValidation();
            }
          }}
          onInput={}
          onChange={(event) => {}} />

          {info &&
            info.map((data) => (
              <>
                <FormGroup>
                  <TextInput
                    id="text-input-1"
                    type="text"
                    value={data.name}
                  />
                </FormGroup>
                <FormGroup>
                  <TextInput
                   
                    id="text-input-2"
                    type="text"
                    value={data.profession}
                    
                  />
                </FormGroup>
              </>
            ))}

</Modal>

如果info中存在数据，其他两个输入字段将出现在模态上。

Answer 1

您可以做的是使用 state 变量来隐藏和显示模态框。 const [isModalOpen,setIsModalOpen]=useState(false)当您单击 div 以打开模态集setIsModalOpen(true)并将模态渲染为{isModalOpen&&<Modal />}并在模态的onClose function 中执行onClose(()=>{setIsMOdalOPen(false)})