Reactstrap 表单重置输入值 MERN 堆栈

Question

我开始学习 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 >

Answer 1

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

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

Reactstrap 表单重置输入值 MERN 堆栈

Reacstrap Form Reset input value MERN stack

javascript

node.js

reactjs

mern

reactstrap