javascript - 在 react 中使用 formik 创建自定义按钮以上传文件

Question

我想创建一个自定义button，单击时可以在其中上传文件。form我用一个input字段和 a创建了abutton并尝试更改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 && 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>
  );
}

标签： javascriptreactjsformik