Блог

Я хочу создать пользовательский button интерфейс, в котором я могу загружать файл при нажатии. Я создал a form с одним input полем и a button и попытался изменить onchange свойство, но я не могу найти способ здесь. Любая помощь по этому вопросу высоко ценится.

Что я пытался сделать здесь, так это использовать button для управления onChange свойством, чтобы я мог загружать файлы.

 import "./styles.css";
import React from "react";
import { Formik } from "formik";
import { Container, Row, Col, Input, Button } from "reactstrap";

export default function App() {
  const hiddenFileInput = React.useRef(null);

  const handleClick = (event) => {
    if (hiddenFileInput amp;amp; hiddenFileInput.current) {
      hiddenFileInput.current.click();
    }
  };

  // const handleChange = (e, formProps) => {
  //   formProps.setFieldValue("photo1", e.target.files[0]);
  // };

  return (
    <div className="App">
      <Container>
        <Row>
          <Col>
            <Formik
              initialValues={{ photo1: "" }}
              onSubmit={(values) => {
                console.log(values);
              }}
            >
              {(formProps) => (
                <form onSubmit={formProps.handleSubmit}>
                  <Input
                    type="file"
                    innerRef={hiddenFileInput}
                    name="photo1"
                    // onChange={handleChange}
                    onChange={(event) => {
                      formProps.setFieldValue("photo1", event.target.files[0]);
                    }}
                    hidden
                  />
                  <Button type="submit" onClick={handleClick}>
                    submit
                  </Button>
                </form>
              )}
            </Formik>
          </Col>
        </Row>
      </Container>
    </div>
  );
}