使用 onChange 事件调用表单提交答案

【问题标题】：Invoke form submit with a onChange event使用 onChange 事件调用表单提交
【发布时间】：2021-03-24 07:35:50
【问题描述】：

对不起，如果标题令人困惑。

基本上我有一个包含单个输入的表单，其中包含伪装成图标的类型文件

我希望在选择文件时提交表单，但我不知道如何使用输入 onChange 事件调用表单提交（我什至不确定这是否是适当的方法）。

代码如下：

          <Form onSubmit={handleSubmit((data) => updateProfilePicture(data))}>
            <IconButton
              component='label'
              htmlFor='image-input'
              style={{
                position: "absolute",
                bottom: "0",
                right: "0",
                backgroundColor: "#eee",
              }}
            >
              <Input
                type='file'
                id='image-input'
                name='file'
                style={{ display: "none" }}
                inputRef={register}
              />
              <PhotoCameraIcon style={{ fontSize: "25px" }} />
            </IconButton>
          </Form>

如下图：

注意：有两种形式，一种用于图像，一种用于数据，我不想通过“更新”按钮来处理，否则它只会是一种形式，我不会有这个问题

【问题讨论】：

标签： reactjs

【解决方案1】：

添加图片后无需提交表单。

您可以只使用输入字段并添加 onChange 事件处理程序来获取图像详细信息。有兴趣的可以看看

https://stackblitz.com/edit/react-qjqt3f

import React from "react";
import "./style.css";

export default class App extends React.Component {
  constructor() {
    super();
    this.state = {
      url: "https://www.w3schools.com/howto/img_avatar.png"
    };
  }

  onSelectFile = e => {
    if (e.target.files && e.target.files[0]) {
      var reader = new FileReader();

      reader.readAsDataURL(e.target.files[0]); // read file as data url

      reader.onload = event => {
        // called once readAsDataURL is completed
        console.log(event.target.result);
        this.setState({ url: event.target.result });
        //you can do the HTTP post call here
      };
    }
  };

  render() {
    return (
      <div>
        <label className="hoverable" htmlFor="fileInput">
          <img src={this.state.url} />
          <div className="hover-text">Choose file</div>
          <div className="background" />
        </label>
        <br />
        <input id="fileInput" type="file" onChange={this.onSelectFile} />
      </div>
    );
  }

}

【讨论】：

太好了，成功了，这是我第一次使用 input type=file，我很难找到 e.target.files 属性，您的回答对我帮助很大！跨度>

【解决方案2】：

您可以给表单一个 id 并通过 javascript 提交表单：

document.getElementById("imageForm").submit();

或者不提交就处理数据：

onChange={() => { handleSubmit(this.files) }}

          <Form id="imageForm" onSubmit={handleSubmit((data) => updateProfilePicture(data))}>
            <IconButton
              component='label'
              htmlFor='image-input'
              style={{
                position: "absolute",
                bottom: "0",
                right: "0",
                backgroundColor: "#eee",
              }}
            >
              <Input
                type='file'
                id='image-input'
                name='file'
                style={{ display: "none" }}
                inputRef={register}
                onChange={() => { document.getElementById("imageForm").submit(); }}
                // or:
                onChange={() => { handleSubmit(this.files) }}
              />
              <PhotoCameraIcon style={{ fontSize: "25px" }} />
            </IconButton>
          </Form>

【讨论】：

感谢您的回复，您不应该使用 getelementbyid 或类似方法在 React 应用中选择元素，您可以使用 useRef hook 来实现。

【解决方案3】：

以编程方式提交表单并不是专门用于 react 的方式。但为此，您可以通过调度提交事件来实现类似的目标。

<Form ref={formRef} onSubmit={handleSubmit((data) => updateProfilePicture(data))}>
   ...

  <Input
     type='file'
     id='image-input'
     name='file'
     style={{ display: "none" }}
     onChange={(e) => formRef.dispatchEvent(new Event('submit'))}
     inputRef={register}
   />
  </Form>

更好的是，如果您不想触发任何类型的 html 表单验证，则不必将此文件输入放在 <form/> 中。您可以直接在 <Input/> s onChange 处理程序中调用 updateProfilePicture(data) 函数。

【讨论】：