Reactstrap Form 重置输入值 MERN 堆栈

Posted 2023-03-23

【中文标题】Reactstrap Form 重置输入值 MERN 堆栈

【英文标题】：Reacstrap Form Reset input value MERN stack

【发布时间】：2021-01-11 19:18:35

【问题描述】：

我开始学习 MERN 堆栈，但是，问题是在我在字段上添加新名称和组织基础并重新打开模式后，最后一个值仍然在表单上，​​我如何在重新打开模式后重置表单？事情是为了添加新的收件人，你需要删除以前的添加。它应该是空白表单输入....我不想安装其他依赖项并修改编写的代码..谢谢您的回答。

 return (
<div>
  <Modal isOpen=modaladd toggleAdd=toggleAdd size="md" centered>
    <ModalHeader toggleAdd=toggleAdd>
      <strong className="text-white">Add Recipient</strong>
    </ModalHeader>
    <ModalBody>
      <Form>
        <Label for="name">
          <small>
            <strong>Name</strong>
          </small>
        </Label>
        <Input
          type="text"
          name="name"
          id="name"
          value=name
          onChange=(newValue) => 
            return setRecipientFormData('name', newValue.target.value);
          
          required
        />
        <Label for="organisation">
          <small>
            <strong>Organization</strong>
          </small>
        </Label>
        <CreatableSelect
          classNamePrefix="select"
          value= label: organisation, value: organisation 
          onChange=(newValue) => 
            return setRecipientFormData('organisation', newValue.value);
          
          options=optionsOrgs
        />
      </Form>
    </ModalBody>
    <ModalFooter>
      <Button disabled=!isEnabled color="primary" onClick=addRecipient>
        Save
      </Button>' '
      <Button color="secondary" onClick=toggleAdd >
        Cancel
      </Button>
    </ModalFooter>
  </Modal>
</div >

【参考方案1】：

没有太多代码可以使用，但可能在您要添加的toggleAdd（或任何集合modalAdd）函数中：

setRecipientFormData('name', "")
setRecipientFormData('organisation', "")