标签: react-hook-form

我正在尝试将 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, …

所以我在使用 yup 进行条件验证时遇到问题。基本上，我希望在未切换复选框时运输具有所需的属性。我正在使用 yup 的when功能，但我不知道如何引用sameShippingAsBilling该shipping嵌套对象中的布尔值。

当复选框为 false 时，一切正常，显示错误...但是当选中复选框时，我收到此错误："Cannot use 'in' operator to search for 'default' in undefined"

问题是is回调中的值未定义。是否可以从这些嵌套对象中访问外部变量when。有什么替代方法可以做到这一点？

这是沙箱示例

const schema = Yup.object({
  sameShippingAsBilling: Yup.bool(),
  billing: Yup.object({
    line1: Yup.string().required(),
    city: Yup.string().required(),
    country: Yup.string().required()
  }),
  shipping: Yup.object({
    line1: Yup.string().when("sameShippingAsBilling", {
      is: !val || val === false,
      then: Yup.string().required(),
    }),
    city: Yup.string().when("sameShippingAsBilling", {
      is: !val || val === false,
      then: Yup.string().required(),
    }),
    country: Yup.string().when("sameShippingAsBilling", {
      is: !val || val === …

我正在定义一个 useForm。

const { handleSubmit, control, errors } = useForm<{email: string}>();

现在我正在创建一个单独的组件来输入，并且我将传递useForm我在上面创建的道具。

这就是组件的样子。

type Props<T> = {
  name: FieldName<T>;
  control: Control<T>;
  errors: FieldErrors<T>;
};

const ControlTextInput = <T extends {}>({
  name,
  control,
  errors,
}: Props<T>) => {
  return (
   
    <Controller
    name={name}
    control={control}
    rules={{
      required:'this is required',
    }}
    render={({ onChange }) => (
        <>
            <TextInput
                onChangeText={(text) => {
                onChange(text);
                }}
            />
            {/* Show my error here */}
            {errors.email && (
                <Text style={{ color: "red" }}>
                    {errors.email?.message}
                </Text>
            )}
      </> …

我正在使用react-hook-form库Yup来管理我的应用程序中的表单。

我正在尝试根据我的组件状态创建动态 Yup 模式。

例如：

import React, { useContext } from "react";
import { useForm } from "react-hook-form";
import { useHistory } from "react-router-dom";
import { FirstFormContext } from "../context/FirstFormContext";
import { SecondFormContext } from "../context/SecondFormContext";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

const schema = yup.object().shape({
  email: yup.string().email().min(2), // <-- Here I want to access the value
  address: yup.string().min(2).max(20)
});

const SecondForm = () => {
  const { secondFormData, setSecondFormData …

我正在阅读一本 React 教程书。有一次，作者向我展示了如何构建一个简单的表单，效果很好。然后，他又将其升级为‘React Hook Form’。

一切都按照说明运行良好，直到最后一行，他说了以下内容。

“将 ref 属性添加到 Header 组件的 JSX 中的输入元素，并将其设置为 React Hook Form 中的注册函数：”

就在此时，我遇到了以下错误。

Type 'UseFormRegister<FormData>' is not assignable to type 'LegacyRef<HTMLInputElement> | undefined'.
  Type 'UseFormRegister<FormData>' is not assignable to type '(instance: HTMLInputElement | null) => void'.
    Types of parameters 'name' and 'instance' are incompatible.
      Type 'HTMLInputElement | null' is not assignable to type '"search"'.
        Type 'null' is not assignable to type '"search"'.  TS2322

    103 |       <form onSubmit={handleSubmit}>
    104 |         <input
  > 105 |         ref={register}
        | …

如何将 Form 的类型继承给其子项？我想通过继承类型来使用名称中的自动建议功能。并且代码运行良好。但这并不能达到我想要的效果。

我是参考下面的链接做的。作为参考，css 使用 tailwind。

https://react-hook-form.com/advanced-usage#SmartFormComponent

代码：

// Form.tsx

import { Children, createElement, FormHTMLAttributes, ReactElement } from "react";
import { FormProvider, SubmitHandler, useForm, UseFormProps } from "react-hook-form";

interface FormProps<T> extends Omit<FormHTMLAttributes<HTMLFormElement>, "onSubmit"> {
    form: UseFormProps<T>;
    children: ReactElement | ReactElement[];
    onSubmit: SubmitHandler<T>;
}

export default function Form<T>({ children, onSubmit, form, ...rest }: FormProps<T>): JSX.Element {
    const methods = useForm<T>(form);

    return (
        <FormProvider {...methods}>
            <form onSubmit={methods.handleSubmit(onSubmit)} {...rest}>
                {Children.map(children, (child) => {
                    return child.props.name
                        ? createElement<T>(child.type, {
                                ...{
                                    key: child.props.name,
                                    ...methods.register,
                                    ...child.props …

我想根据另一个输入值有条件地禁用输入。常见的用例是我们有一个复选框，我们需要禁用/启用相同表单中的另一个输入。我怎样才能用react-hook-form来实现它？我想禁用，而不是提交时的验证。

目前，我正在使用FormControlLabel（material-ui）和react-hook-form。任何帮助将不胜感激。

更新！这是我的想法的一个小演示代码

import { Controller, useForm } from "react-hook-form";
import { FormControlLabel, Checkbox } from "@material-ui/core";

const { control } = useForm({/* some options */});

// Below is render function

<form onSubmit={handleSubmit(onSubmit)}>
  <Controller
  name="checkbox"
  control={control}
  render={({ field: { onChange, value }}) => {
    return (
      <FormControlLabel
        control={
          <Checkbox
            checked={value}
            onChange={e => {
              onChange(e.target.checked);
            }}
          />
        }
        label="Enable text input?"
        labelPlacement="end"
      />
    );
  }}
/>
<Controller
  name="text-input"
  control={control}
  render={({ field: { onChange, value } }) => {
    return …

当将 React-hook-form 与 Typescript 一起使用时，有一个组件会发送一些 props，register作为其中之一。

问题在于在接口中声明时的类型：

export interface MyProps {
  title: string;
  ...
  register: (string | undefined) => void;
}

这里的正确声明方式是什么register？

还尝试过：

import { RegisterOptions } from 'react-hook-form';
    export interface MyProps {
      title: string;
      ...
      register: RegisterOptions;
    }

我正在尝试将 react-hook-form 与 antd<Input />组件一起使用

我不能reset一起工作<Controller />

这是我的代码：

const  NormalLoginForm = () =>{
  const {reset, handleSubmit, control} = useForm();

  const onSubmit = handleSubmit(async ({username, password}) => {
        console.log(username, password);
        reset();
  });

    return (
      <form onSubmit={onSubmit} className="login-form">
        <Form.Item>
                        <Controller as={<Input
                            prefix={<Icon type="user" style={{color: 'rgba(0,0,0,.25)'}}/>}
                            autoFocus={true}
                            placeholder="Benutzername"

                        />} name={'username'} control={control}/>

                    </Form.Item>
                    <Form.Item>
                        <Controller as={<Input
                            prefix={<Icon type="lock" style={{color: 'rgba(0,0,0,.25)'}}/>}
                            type="password"
                            placeholder="Passwort"

                        />} name={'password'} control={control}/>
                    </Form.Item>
        <Form.Item>
          <Button type="primary" htmlType="submit" className="login-form-button">
            Log in
          </Button>
        </Form.Item>
      </form>
    );
}

我期望在提交表单时清除两个输入字段。但这不起作用。 …

所以我有一个表单，其中包含我通过来自 react-hook-form 的 Field Array 添加的自定义字段。一切正常，但我为属性项添加了拖放功能（以重新排序），现在直接显示所有这些许多字段会很麻烦，所以我将它们移动到对话框中。

以下是了解什么更容易拖放的图片......（正确的）

问题是字段数组值在模式关闭后“重置”（在我在编辑模式中输入这些表单值之后），我猜这与重新渲染有关，但我不确定。

我试图在没有 d&d 和其他无用的东西的情况下展示最小的代码示例......
但这里是带有完整代码的代码和盒子游乐场

创建CategoryForm.js

const defaultValues = {
  name: "",
  slug: "",
  description: "",
  properties: [] // field array
}

function CreateCategoryForm() {
  const methods = useForm({ defaultValues });
  const { handleSubmit, control, errors } = methods;
  const { fields, append, remove, swap } = useFieldArray({ name: "properties", control });

  const onSubmit = async (data) => {
    console.log("data: ", data);
  };

  return (
    <Container>
        <FormProvider {...methods}>
          <form onSubmit={handleSubmit(onSubmit)} noValidate>
            <FormTextField …