标签: react-hook-form

我正在使用打字稿处理 react hook 表单。我的数据结构在数组中看起来是数组。所以我尝试使用useFieldArray

allName: [
    {
      name: "useFieldArray1",
      nestedArray: [
        { name1: "field1", name2: "field2" },
        { name1: "field3", name2: "field4" }
      ]
    },
    {
      name: "useFieldArray2",
      nestedArray: [{ name1: "field1", name2: "field2" }]
    }
  ]

但是当我尝试为输入设置名称时，就像allName[${nestIndex}].nestedArray 我收到以下警告一样。

Type 'string' is not assignable to type '"allName" | `allName.${number}.nestedArray`'

在这里我附上了我的代码的代码沙箱链接。 https://codesandbox.io/s/gallant-buck-iyqoc?file=/src/nestedFieldArray.tsx:504-537 如何解决这个问题？

我正在尝试弄清楚如何在 antd 前端使用 react-hook-form。

我制作了这个表格，它似乎可以工作（它是多部分表格向导的第 1 部分），只是不显示错误消息。

谁能看到我在合并这两个表单系统时做错了什么？

我没有收到任何错误，但我想我已经要求两个表单字段都是必需的，但是如果我在没有完成它们的情况下按提交，则不会显示错误消息。

import React from "react";
import useForm from "react-hook-form";
import { BrowserRouter as Router, Route } from "react-router-dom";
import { StateMachineProvider, createStore } from "little-state-machine";
import { withRouter } from "react-router-dom";
import { useStateMachine } from "little-state-machine";

import updateAction from "./updateAction";
import { Button, Form, Input,  Divider, Layout, Typography, Skeleton, Switch, Card, Icon, Avatar } from 'antd';


const { Content } = Layout 
const { Text, Paragraph } = Typography;
const { …

在处理 React-hook-form 时进行输入字段匹配验证的最佳实践是什么？例如，匹配email输入时等。

在使用 React-hook-form 查看电子邮件匹配验证时，在尝试通过验证方法将错误消息与“耦合元素”分开时发现了一个问题。在ref只需要一个用于阵营钩形件形成一个参数register，而需要使用useRef访问current.value为值匹配，如下所示：

import React, { useRef } from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

function App() {
  const { register, handleSubmit, errors } = useForm();
  const inputEmail = useRef(null)
  const onSubmit = data => {
    console.log('onSubmit: ', JSON.stringify(data))
  }

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="email">Email</label>
      <input
        name="email"
        type="email"
        ref={inputEmail}
      />
      {/* desired: show `email` error message */}
      <label htmlFor="email">Email confirmation</label>
      <input …

我正在使用react-hook-forms并尝试在提交后重置所有表单字段。问题是在我的例子中，自动完成接受对象作为值。

我尝试将 设为defaultValue，{}但收到以下消息：

Material-UI：getOptionLabelAutocomplete 方法返回 undefined 而不是 {} 的字符串

是否有任何重置自动完成功能的变体？

这是CodeSandbox的链接

我尝试制作一个日期选择器，当单击带有图标的字段和字符串格式的当前日期时会出现该日期选择器。

我使用 React Native、React Hook Form 和 @react-native-community/datetimepicker。

偶然我在一个不相关的问题上发现了一个有趣的答案： /sf/answers/4335083511/

我是这样实现的：

const MyComponent = () => {
  const { userData } = useContext(UserDataContext)
  const [isPickerOpen, setIsPickerOpen] = useState(false)
  const parsedBirthday = (userData && userData.birthday && userData.birthday.toDate()) || new Date()
  const [birthday, setBirthday] = useState(parsedBirthday)

  // Validation schema
  const schema = yup.object({
    birthday: yup.date(),
  })

  const { control, handleSubmit, errors } = useForm({resolver: yupResolver(schema)})

  const onSubmit = async (data: any) => {
    console.log(data)
  }

  const datePickerHandler = (selectedDate: Date) => { …

该组件没有错误，但是在我实际调用输入组件的索引文件中，它有错误，因为它无法使用register = {register}。

缺什么？或者出了什么问题？

https://codesandbox.io/s/react-hook-form-typescript-xnb1u

为了验证以react-hook-form形式提交的输入，我正在做这样的事情

<input type="text" id="name" ref={register({ required: true, maxLength: 30 })} />

但这是在提交时..在我从远程API端点获得响应后，我需要在同一输入字段中显示一些验证消息..

我想向输入字段添加验证。我正在使用反应钩子形式。验证应类似于字段总和应为 100。如果任何字段使总和大于或小于 100，则应在输入字段（最后编辑的字段）处显示错误。

沙箱网址： https://codesandbox.io/s/distracted-elion-z2wob ?file=/src/App.js

谢谢

我正在尝试使用 react 钩子形式来创建嵌套数组。我在我的示例代码中附加了一个沙箱

代码片段

<ul>
        {fields.map((item, index) => {
          return (
            <li key={item.id}>
              <label> single input </label>
              <input
                name={`test[${index}].task`}
                ref={register()}
                defaultValue={item.task}
              />
              <br />
              <label> first Name </label>
              <input
                name={`test[${index}].name.first`}
                ref={register()}
                defaultValue={item.name.first}
              />
              <br />
              <label>last Name </label>
              <input
                name={`test[${index}].name.last`}
                ref={register()}
                defaultValue={item.name.last}
              />
              <br />

              <label>First Nested </label>
              <input
                name={`test[${index}].nestedArray[${index}].firstNested`}
                ref={register()}
                // defaultValue={item.nestedArray.nested}
              />

              <br />
              <label> Second Nested </label>
              <input
                name={`test[${index}].nestedArray[${index}].secondNested`}
                ref={register()}
                // defaultValue={item.nestedArray.nested}
              />
              <br />

              <button type="button" onClick={() => remove(index)}>
                Delete
              </button>
            </li>
          );
        })}
      </ul>

问题 …

我正在尝试验证表单。当我将 React-select 组件插入到控制器中时，问题就出现了：即使规则设置为“required: true”，如果 Controller 后又出现一个正常的输入框错误，它会跳转到下一个并失去焦点控制器错误（在本例中为“品牌评论部分”）。这里是代码：

export default function Proof() {
    const { register, handleSubmit, errors, control } = useForm();
    const refReactSelect = useRef();

    const createHandler = (data) => {
        console.log(data);
    }
    return (
        <div>
            <form onSubmit={handleSubmit(createHandler)}>
                <label className="font-weight-medium" htmlFor="productCategory">Category</label>
                {/* Name */}
                <div className="form-group pb-2">
                    <label className="font-weight-medium" htmlFor="productName">Name</label>
                    <input
                        className="form-control"
                        type="name"
                        id="productName"
                        name="productName"
                        ref={register({ required: true })}
                    />
                    {errors.productName && errors.productName.type === "required" && (
                        <p className="text-danger">{"Empty name"}</p>
                    )}
                </div>

                <Controller
                    name="productCategory"
                    as={
                        <Select
                            ref={refReactSelect}
                            options={categories}
                            isSearchable={true}
                            placeholder="Select"
                            id="productCategory" …