仅提交假路径的文件反应钩子表单 [英] React Hook Form with file just submitting fakepath

查看：55
本文介绍了仅提交假路径的文件反应钩子表单的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在尝试将 <Input type="file" 添加到我的 react-hook-form，但它提交了一个 C:\fakepath 当我提交表单时.

从反应"导入反应；import { Controller, useForm } from react-hook-form";从reactstrap"导入{按钮、表单、标签、输入}；const App = () =>{常量{处理提交，控制，设定值，表单状态:{错误}} = useForm();const submitData = (数据) =>{控制台日志(数据)；};返回 (<div className="row"><div className="col-sm-12 col-md-12 col-xl-12"><Form onSubmit={handleSubmit(submitData)}><div className="row"><div className="col-sm-6"><Label for="file">File</Label><控制器名称=文件"控制={控制}render={({ field }) =>(<Input {...field} type="file";id=文件"/>)}/>

<按钮类型=提交"颜色=主要">提交</按钮></表格>

);};导出默认应用程序；

这是沙箱:https://codesandbox.io/s/morning-water-你好

如何使用带有 react-hook-form 的文件?

谢谢

解决方案

您可以在这里找到解决方案:https://github.com/react-hook-form/react-hook-form/discussions/5394#discussioncomment-848215

这是通过 register 实现的另一种方法:

从反应"导入反应；import { useForm } from react-hook-form";从reactstrap"导入{按钮、表单、标签、输入}；const App = () =>{const { register, handleSubmit } = useForm();const submitData = (数据) =>{控制台日志(数据)；};const { ref, ...field } = register(文件");返回 (<div className="row"><div className="col-sm-12 col-md-12 col-xl-12"><Form onSubmit={handleSubmit(submitData)}><div className="row"><div className="col-sm-6"><Label for="file">File</Label><Input {...field} innerRef={ref} type=file";id=文件"/>

<按钮类型=提交"颜色=主要">提交</按钮></表格>

);};导出默认应用程序；

I'm trying to add an <Input type="file" to my react-hook-form, but it submit a C:\fakepath when I submit the form.

import React from "react";
import { Controller, useForm } from "react-hook-form";
import { Button, Form, Label, Input } from "reactstrap";

const App = () => {
  const {
    handleSubmit,
    control,
    setValue,
    formState: { errors }
  } = useForm();

  const submitData = (data) => {
    console.log(data);
  };

  return (
    <div className="row">
      <div className="col-sm-12 col-md-12 col-xl-12">
        <Form onSubmit={handleSubmit(submitData)}>
          <div className="row">
            <div className="col-sm-6">
              <Label for="file">File</Label>
              <Controller
                name="file"
                control={control}
                render={({ field }) => (
                  <Input {...field} type="file" id="file" />
                )}
              />
            </div>
          </div>
          <Button type="submit" color="primary">
            Submit
          </Button>
        </Form>
      </div>
    </div>
  );
};

export default App;

Here is the sandbox: https://codesandbox.io/s/morning-water-hyi9o

How can I use files with react-hook-form?

Thanks

解决方案

You can find a solution here: https://github.com/react-hook-form/react-hook-form/discussions/5394#discussioncomment-848215

Here is another way to achieve that with register:

import React from "react";
import { useForm } from "react-hook-form";
import { Button, Form, Label, Input } from "reactstrap";

const App = () => {
  const { register, handleSubmit } = useForm();

  const submitData = (data) => {
    console.log(data);
  };

  const { ref, ...field } = register("file");

  return (
    <div className="row">
      <div className="col-sm-12 col-md-12 col-xl-12">
        <Form onSubmit={handleSubmit(submitData)}>
          <div className="row">
            <div className="col-sm-6">
              <Label for="file">File</Label>
              <Input {...field} innerRef={ref} type="file" id="file" />
            </div>
          </div>
          <Button type="submit" color="primary">
            Submit
          </Button>
        </Form>
      </div>
    </div>
  );
};

export default App;

这篇关于仅提交假路径的文件反应钩子表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆