Блог

Я ценю любые ответы и предложения. У меня есть компонент react, который загружает форму для редактирования продукта. Когда компонент смонтирован, он получит реквизиты от другой функции, и я использую эти значения внутри реквизита в качестве значения по умолчанию для полей ввода в форме. У меня также есть элемент ввода, который принимает загрузку файла. Когда файл выбран, компонент, похоже, обновляется и устанавливает для других полей ввода значения по умолчанию. Вот мой компонент:

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

 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 . это рабочий код из моего проекта