單擊文件輸入時防止頁面重新加載

Question

我感謝任何人的回應和建議。 我有一個加載表單來編輯產品的反應組件。 安裝組件后，它將從另一個 function 接收道具，我將道具中的這些值用作表單中輸入字段的默認值。 我還有一個接受上傳文件的輸入元素。 選擇文件后，組件似乎正在刷新並將其他輸入字段設置為其默認值。 這是我的組件：

  <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>

問題是當我選擇文件並單擊 select 時，所有其他輸入字段都重置為其默認值。 這是我的handleImg function：

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

我曾嘗試使用 e.preventDefault()，但到目前為止我還沒有機會。 關於如何 go 對此有何建議？

再次感謝你。

編輯：我修復了表單處理程序，現在這是我的 handleSubmit function：

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);};

Answer 1

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 。 這是我項目中的工作代碼