Reactstrap Form 重置输入值 MERN 堆栈答案

【问题标题】：Reacstrap Form Reset input value MERN stackReactstrap Form 重置输入值 MERN 堆栈
【发布时间】：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 >

【问题讨论】：

标签： javascript node.js reactjs mern reactstrap

【解决方案1】：

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

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

【讨论】：