javascript - React - 文件上传器按钮无法正常工作

Question

我在弹出框/对话框中制作了一个自定义的文件上传器按钮。当我单击按钮时，资源管理器将被打开，但在选择文件后，onSubmit函数被调用。因为这个文件没有被正确选择。我想停止onSubmit自动调用。

文件上传器.js

import React from 'react';
import * as Icon from 'react-bootstrap-icons';

const FileUploader = (props) => {
  const hiddenFileInput = React.useRef(null);

  const handleClick = (event) => {
    console.log('Handle Click');
    hiddenFileInput.current.click();
  };

  const handleChange = (event) => {
    console.log('handle chnage');
    const fileUploaded = event.target.files[0];
    // props.handleFile(fileUploaded);
  };

  return (
    <>
      <button
        style={{ border: 'none', background: 'white', paddingTop: -10 }}
        onClick={handleClick}
      >
        <span>
          <Icon.Paperclip />
        </span>
      </button>
      <input
        type="file"
        ref={hiddenFileInput}
        style={{ display: 'none' }}
        onChange={handleChange}
      />
    </>
  );
};

export default FileUploader;

AddTicket.js

import React from "react";
import { Row, Col } from "reactstrap";
import { Form, FormGroup, Input } from "reactstrap";
import ActionButton from "./../../components/ButtonComponent";
import ReactQuill, { Quill } from "react-quill";
import "react-quill/dist/quill.snow.css";
import CustomToolbar from "./CustomToolbar";

import FileUploader from "./FileUploader";

class AddTicket extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      editorHtml: "",
      description: "",
    };
  }

  handleSubmit = (event) => {
    event.preventDefault();
    console.log("Submit");
    this.props.handleClose();
  };

  static modules = {
    toolbar: {
      container: "#toolbar",

      handlers: {
        file: this.insertFile,
      },
    },
  };

  static formats = [
    "header",
    "font",
    "size",
    "bold",
    "italic",
    "underline",
    "strike",
    "blockquote",
    "list",
    "bullet",
    "indent",
    "link",
    "image",
    "color",
  ];

  render() {
    return (
      <div className="popup-box">
        <div className="box">
          {/* <span className="close-icon" onClick={props.handleClose}>
            x
          </span> */}
          <Form
            onSubmit={this.handleSubmit}
            style={{ paddingLeft: 30, paddingTop: 50 }}
          >
            <Row style={{ paddingBottom: 50 }}>
              <Col sm={11} xs={11} md={11}>
                <h1>Add new ticket </h1>
              </Col>
              <Col onClick={this.props.handleClose} m={1} xs={1} md={1}>
                <h1 className="close-icon">X </h1>
              </Col>
            </Row>

            <FormGroup>
              <Row style={{ marginBottom: "25px" }}>
                <Col sm={2}>
                  <h4>Description</h4>
                </Col>
                <Col sm={9}>
                  <div className="editor-wrapper">
                    <div className="editor-container">
                      <div className="text-editor">
                        <ReactQuill
                          value={this.state.editorHtml}
                          onChange={this.handleChange}
                          placeholder={this.props.placeholder}
                          modules={AddTicket.modules}
                          formats={AddTicket.formats}
                        />
                        <Row>
                          <Col sm={6}>
                            <CustomToolbar />
                          </Col>
                          <Col sm={6}>
                            <FileUploader />
                          </Col>
                        </Row>
                      </div>
                    </div>
                  </div>
                </Col>
              </Row>
            </FormGroup>

            <Row>
              <Col sm={2}></Col>
              <Col>
                <ActionButton text="Send" />
              </Col>
            </Row>
          </Form>
        </div>
      </div>
    );
  }
}

export default AddTicket;

标签： javascriptreactjs

Answer 1

发生这种情况是因为您没有传递函数，而是在 onClick 中调用它。使固定：

    <>
      <button
        style={{ border: 'none', background: 'white', paddingTop: -10 }}
        onClick={() => handleClick()}
      >
        <span>
          <Icon.Paperclip />
        </span>
      </button>
      <input
        type="file"
        ref={hiddenFileInput}
        style={{ display: 'none' }}
        onChange={handleChange}
      />
    </>