标签: react-hook-form

我尝试使用 react-hook-form 来验证输入。但是我发现如果输入被放置在 Material UI 的对话框组件中，react-hook-formsetValue不会按预期工作，但是当我删除 Dialog 组件时它可以工作。我猜原因是该值是在组件安装之前设置的，但仍然找不到解决方案。

该值将从服务器检索，所以我不能使用 react-hook-form 的defaultValues.

https://codesandbox.io/s/react-hook-form-material-ui-twbbw

我曾尝试使用useState来控制输入值，但还有一个问题。清除输入后，点击提交按钮，出现错误提示，我输入的第一个字母不显示。

https://codesandbox.io/s/react-hook-form-material-ui-ve2en

我有一个反应组件InputField：

export default function InputField({ name, type, placeholder, className }, ref) {
  return (
    <input
      name={name}
      type={type}
      placeholder={placeholder}
      className={InputTailwindStyle}
      ref={ref}
    />
  );
}

我尝试将其放入另一个组件LoginForm中，其中我使用react-hook-form来处理我的表单挂钩：

import { useForm } from 'react-hook-form';

(some code ... )

const { register, handleSubmit } = useForm();

<InputField
        name='password'
        type='password'
        placeholder='Password'
        ref={register}
/>

但我收到此错误： TypeError: 无法定义属性“current”: 对象不可扩展

是否可以仅在字段存在时验证该字段？

我将创建一个应用程序。字段（电子邮件）可能会/可能不会显示在步骤 2 中，这取决于步骤 1 的选择选项。问题是我不能 put email: Yup.string().Required()，它会导致验证一直运行，即使该字段没有显示。

如何添加验证，我想在电话号码字段（helperText，最小 10 ，最大 10 ）上显示错误消息，并且如果提交时没有 10 个数字，还显示错误消息

import ReactPhoneInput from "react-phone-input-2"
import {TextField,Button}from "@material-ui/core"

const {register, handleSubmit,formState: { errors }} = useForm()

const getData= (data) => {
   console.log(data.username)
   console.log(data.phone);
}

<form onSubmit={handleSubmit(getData)} >

  <Controller
        control={control}
        name="phone"
        render={({ field: { ref, ...field } }) => (
          <ReactPhoneInput {...field}
            inputExtraProps={{ref, required: true, autoFocus: true }}
            country={"in"}
            onlyCountries={["in"]}
            countryCodeEditable={false}
            specialLabel={"Player Mobile Number"}
          />
        )}
      />
<Button type='submit>Submit</Button> 
</form>

我想使用 React hook 表单和 axios 上传文件以及表单数据。我发现这个很棒的视频解释了如何创建一个简单的示例。但是，我没有找到一个很好的解决方案如何使用 axios 将数据传输到后端。考虑下面的简单示例：

function Test() {
    const {register, handleSubmit} = useForm();
    const onSubmit = (data) => {
        console.log(data);
    };
    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <input {...register("name")} />
            <input {...register("picture")} type="file"/>
            <button>Submit</button>
        </form>
    );
}

现在我想出的提交函数 - 并且显然确实有效 - 看起来有点像这样：

const onSubmit = (data => {
     const formData = new FormData();
     for (const [key, value] of Object.entries(data)) {
        formData.append(key, value);
     }

    api.submitPost(formData, {headers: {'Content-Type': 'multipart/form-data'}})
       .then((response) => {
            console.log(response);
       })
       .catch((error) => {
            console.log(error);
       }); …

我正在使用 Next.js、TypeScript、sanity 和 tailwindcss。我尝试使用react-hook-form，但收到错误。

我试过了：

• 将函数更改Post为箭头函数
• 将函数更改Post为 const 函数
• 将接口更改IFormInput为类型

这是错误所在：

  23 |      formState: { errors },
> 24 |  } = useForm<IFormInput>();
     |            ^
  25 | 
  26 |  return (
  27 |      <main>

这是我在页面文件夹中的代码（[slug].tsx）：

import { useForm, SubmitHandler } from "react-hook-form";

interface IFormInput {
    _id: string;
    name: string;
    email: string;
    comment: string;
}

function Post({ post }: Props) {
 const { register, handleSubmit, formState: { errors } } = useForm<IFormInput>();

 return …

我正在尝试使用 react-hook-form 库来验证表单。当我使用 ant design 或 material UI 渲染视图时，它无法正常工作。

<Input name="firstName" ref={register({ required: true })} />
  {errors.firstName && 'First name is required'}

发生了一些警告："Missing name at.....".

我正在使用react-hook-form存储表单数据，这些数据根据Codesandbox.io 上看到的代码分为两页。我能够使用defaultValue={state.data.firstName}例如属性分配成功地存储简单的文本输入（如名字、电子邮件等）...但我无法弄清楚如何使用 react 建议的模型将选中的项目存储在无线电组中-钩形。我检查了他们的文档，遗憾的是很少提到单选按钮组状态存储。这可以使用他们的 API 吗？

import React from "react";
import { useForm } from "react-hook-form";
import { withRouter } from "react-router-dom";
import { useStateMachine } from "little-state-machine";
import updateAction from "./updateAction";

const Step1 = props => {
  const { register, handleSubmit, errors } = useForm();
  const { action, state } = useStateMachine(updateAction);
  const onSubit = data => {
    action(data);
    props.history.push("./step2");
  };

  return (
    <form onSubmit={handleSubmit(onSubit)}>
      <h2>Step 1</h2>
      <label>
        First Name:
        <input …

我正在尝试将和用作Material-UI Autocomplete多重输入react-hook-formcontroldefaultValues在编辑数据时，根据从数据库获取的已保存数据渲染预填充的组件）

所以主要问题是：

控制Material-UI Autocomplete组件中的默认值并将其与react-hook-form？

到目前为止我做了什么：

\n

1. 通过在 React 中使用函数和钩子，我在 React Hook Form 中包装了一个自动完成组件Controller来控制状态。我尝试实现 MUI 文档中的解决方案\nandreact-hook-form以及以下线程的解决方案。

   \n

   我在这里创建了一个最小的沙箱

   \n
\n

它能做什么

当我设置defaultValuein时Controller，它可以显示受控的默认值，但会引发错误：TypeError: Cannot read property \'filter\' of undefined

  <Controller\n      as={\n      <Autocomplete\n        multiple\n        value={defaultValues}\n        onChange={(e, values) => setValue("food", values)}\n        ...\n        renderInput={params => ( ... )}\n      />\n    }\n    control={control}\n    name="food"\n    defaultValue={defaultValues} // <- this makes the …

我正在尝试将 antd 形式与react-hook-form 一起使用，但无法使其工作。

基本上我正在使用 antd 的主题，并希望集成react-hook-form以获得更好的验证和其他功能。到目前为止这是代码

import { Button, Form, Input, Message, Row, Tooltip } from "antd";
import { useForm, Controller } from "react-hook-form";
import {
  EyeTwoTone,
  MailTwoTone,
  PlaySquareTwoTone,
  QuestionCircleTwoTone,
  SkinTwoTone,
} from "@ant-design/icons";
import Link from "next/link";
import Router from "next/router";
import styled from "styled-components";

const FormItem = Form.Item;

const Content = styled.div`
  max-width: 400px;
  z-index: 2;
  min-width: 300px;
`;

const Register = (props) => {
  const defaultValues = {
    name: null,
    phone: null,
    email: null,
    password: null, …