时间戳

首页 > 解决方案 > 单击文件输入时防止页面重新加载

javascript - 单击文件输入时防止页面重新加载

问题描述

我感谢任何人的回应和建议。我有一个加载表单来编辑产品的反应组件。安装组件后，它将从另一个函数接收道具，我将道具中的这些值用作表单中输入字段的默认值。我还有一个接受上传文件的输入元素。选择文件后，组件似乎正在刷新并将其他输入字段设置为其默认值。这是我的组件：

  <form onSubmit={handleSubmit}>
    <div className="form-row">
      <div className="col-md-4 mt-md-2">
        <input
          type="text"
          className="form-control"
          name="name"
          placeholder="Name"
          defaultValue={product!.name}
          ref={register({
            required: true,
            pattern: /^[a-zA-Z ]*$/,
          })}
        />
      </div>
      <div className="col-md-4 mt-2 mt-md-2">
        <input
          type="text"
          className="form-control"
          name="qty"
          placeholder="Quantity"
          defaultValue={product!.qty}
          ref={register({ required: true, pattern: /^[0-9]+$/ })}
        />
      </div>
    </div>

    <div className="form-row">
      <div className="col-md-4 mt-2 mt-md-2">
        <div className="input-group">
          <div className="custom-file">
            <input
              type="file"
              className="custom-file-input"
              name="posImg"
              id="img"
              title="Add image to product if it is a menu item"
              onChange={handleImg}
            />
            <label
              className="custom-file-label"
              htmlFor="img"
              aria-describedby="inputGroupFileAddon02"
            >
              {fileLabelState}
            </label>
          </div>
        </div>
      </div>
    </div>
    <div className="d-flex justify-content-end mt-2">
      <button
        type="submit"
        className="btn zaad justify-content-end"
        title="Submit product edit"
      >
        Update
      </button>
    </div>
  </form>

问题是当我选择文件并单击选择时，所有其他输入字段都重置为其默认值。这是我的 handleImg 函数：

const handleImg = (e: any) => {
  e.preventDefault();
  const file = e.target.files[0];
  setFileLabelState(e.target.files[0].name);
  setFile(file);
};

我曾尝试使用 e.preventDefault()，但到目前为止我还没有机会。关于如何解决这个问题的任何建议？

再次感谢你。

编辑：我修复了表单处理程序，现在这是我的 handleSubmit 函数：

const handleSubmit = (event: any) => {
  event.preventDefault();
  event.stopPropagation();
  let editedProd = new FormData();
  let isMenu: string = event.menuItemOption === "yes" ? "true" : "false";
  editedProd.append("name", event.name);
  editedProd.append("qty", event.qty);
  editedProd.append("img", file);};

标签： javascriptreactjs

解决方案

const handleSubmit = event => {
  event.preventDefault();
  let editedProd = new FormData();
  let isMenu: string = event.menuItemOption === "yes" ? "true" : "false";
  editedProd.append("name", event.name);
  editedProd.append("qty", event.qty);
  editedProd.append("img", file);};
}

在此处尝试此答案说明，我将其更改(event: any)为event. 这是我项目中的工作代码

推荐阅读