标签: react-hook-form

以下代码犯了最奇怪的错误。

/src/components/competitions/TheVaultform.js 第 5 行：在函数“contactform”中调用 React Hook “useForm”，该函数既不是 React 函数组件，也不是自定义 React Hook 函数 react-hooks/rules-of-hooks

搜索关键字以了解有关每个错误的更多信息。

我刚刚安装了 react-hook-form 并运行了演示代码。

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

export default function contactform() {
  const { register, handleSubmit, errors } = useForm();
  const onSubmit = data => console.log(data);
  console.log(errors);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input type="text" placeholder="First name" name="First name" ref={register({required: true, maxLength: 80})} />
      <input type="text" placeholder="Last name" name="Last name" ref={register({required: true, maxLength: 100})} />
      <input type="text" placeholder="Email" name="Email" ref={register({required: true, …

我尝试将 DownShift 中的 useComboBox 与 react-hook-form 一起使用，并且输入的值始终未定义。我从这里开始：https://codesandbox.io/s/react-hook-form-controller-079xx ?file=/src/DonwShift.js

并将 DownShift.js 组件替换为： https: //codesandbox.io/s/usecombobox-usage-1fs67? file=/src/index.js:168-438

一切正常，除非我提交的值未定义。设置该值时我缺少什么？

<form className="card" onSubmit={handleSubmit(handleShare)}>
  <div className="body">
    <Controller
      as={Autocomplete}
      control={control}
      name="recipient"
      items={userList}
    />
    <button
      className="secondaryActionBtn inputBtn"
      type="submit"
      enabled={String(formState.dirty)}
    >
      <FontAwesomeIcon icon={faPlus} />
    </button>
    {errors.lastname && 'Feed Name is required.'}
  </div>
  <footer></footer>
</form>

import React, { memo, useState } from 'react';
import PropTypes from 'prop-types';
import { useCombobox } from 'downshift';

const menuStyles = {
  maxHeight: '180px',
  overflowY: 'auto',
  width: '135px',
  margin: 0,
  borderTop: 0,
  background: 'white', …

我在react-hook-form 这里使用了一个嵌套的字段数组设置。请注意，我的实际代码有点复杂，但这里显示的问题完全相同。

我遇到的问题是，如果我删除列表中的一个项目，比如ID: 2在 list 中[{ID:1}, {ID:2}, {ID:3}]，结果不是[{ID:1}, {ID:3}]，而是[{ID:1}, {ID:2}].

这是官方示例，它正确获取嵌套字段数组。

据我所知，唯一的区别是我的表单依赖于从 API 检索的数据（在我的示例中，由async函数处理），而官方示例使用已经启动的数据。

查看在线示例，有些人利用了该<Controller>领域，但这只是给我带来了更多问题（在我的实际代码中），并且在测试时（在代码沙盒中），并没有真正改变删除 2 不会改变整个阵列起来。

有什么我想念的吗？

I\xc2\xb4m 尝试在渲染编辑表单组件时填充material-ui datepicker字段的值，我可以在控制台中看到日期对象正在正确创建，但它没有传递到状态，不知道我是什么\xc2\xb4m 做错了。

这是组件

\nfunction DatePickerField(props) {\n\n    const { field , studentValues, control} = props;\n    const classes = useStyle();\n    const [date, setDate] = useState(null);\n   \n    \n    const handleChange = (date) => {\n        setDate(date)\n               \n    }\n\n    \n\n    // Check if the input name of the field we get from knack match the input name of the form and if yes display the value\n    useEffect(() => {\n        if (studentValues) {\n            const dataStudentArranged = DataStudent(studentValues);\n            dataStudentArranged.forEach((card) => {\n                card.cardValues.forEach((cardValue) => …

我正在尝试添加react-hook-form到我的reactstrap表单和输入中，但看起来包之间存在冲突。

import React, { useState, useEffect } from 'react';
import { useForm } from "react-hook-form";
import {
    Button,
    Form,
    Label,
    Input
} from 'reactstrap';
import { FormControlLabel, Checkbox, FormGroup } from '@material-ui/core';

...

const { register, handleSubmit, errors } = useForm();

...

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

return (
   <Form onSubmit={handleSubmit(updDetails)}>
      <FormGroup className="mr-10 mb-10">
         <Label for="compName" className="mr-sm-10">Company Name</Label>
         <Input type="text" name="compName" id="compName" placeholder="Company Name"
            ref={register({ required: true })} aria-invalid={errors.name ? "true" : "false"} …

我有这个问题

无法读取未定义的属性“标题”。

我已经按照文档中的示例代码进行操作，react-hook-form但我仍然遇到此问题。

const [taskInfo, setTaskInfo] = useState({
    title: '',
    description: '',
    created: currentUser.fullname,
    assigned: '',
    priority: '',
    dateDue: new Date(),
  });


const handleChange = (e) => {
    const { name, value } = e.target;
    setTaskInfo((prev) => ({ ...prev, [name]: value }));
  };


const { register, errors, handleSubmit } = useForm();

<TextField
  fullWidth
  variant='outlined'
  label='Title'
  value={taskInfo.title}
  onChange={handleChange}
  onFocus={handleDisbleLabel}
  onBlur={handleEnableLabel}
  InputLabelProps={{ shrink: false }}
  {...register('title', { required: 'This is required' })}
/>
  {errors.title && 'Your input is required'}

我开始使用它react-hook-form来验证我的输入，但即使我在输入字段中键入/输入某些内容，要求规则也始终会触发。

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

const setErrorStyle = (name) => {
  return {
    borderColor: name ? "red" : "",
    boxShadow: name ? "0 0 1.5px 1px red" : ""
  };
};

const App = () => {
  const [comment, setComment] = useState("");
  const {
    handleSubmit,
    control,
    formState: { errors }
  } = useForm();

  const submitForm = (data) => { …

我正在使用带有react-select的react-hook-form控制器。我正在使用 React 和Typescript。我可以在提交时获取选定的值，但它从选项数组中返回值和标签作为对象。如何仅返回值？这是代码，

const { handleSubmit, control, formState:{errors}} = useForm<IAddProductForm>();

const handleOnSubmit = (data:IAddProductForm) => {
        console.log(data);
    }

const categoryOptions = [
        {value:"Grocery", label:"Grocery"},
        {value:"Pharmacy", label:"Pharmacy"},
        {value:"Electronic", label:"Electronic"},
        {value:"Food", label:"Food"},
    ];

return(
        <React.Fragment>
           <Form onSubmit={handleSubmit(handleOnSubmit)}>
               <Controller
                   control={control}
                   render={({field:{onChange, value, name, ref}}) => (
                        <Select
                           inputRef={ref}
                           value={categoryOptions.find(c => c.value === value)}
                           options={categoryOptions}
                           onChange={onChange}
                        />
                   )}
                   name={"category"}
                />
               <Button type={"submit"}>submit</Button>
            </Form>
        </React.Fragment>
);