Question

我感谢任何人的回应和建议。我有一个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>

问题是当我选择文件并单击select时，所有其他输入字段均重置为其默认值。这是我的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);};

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。这是我项目中的工作代码

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

1 个答案: