标签: react-hook-form

我正在使用 react-hook-form ( https://react-hook-form.com/ )。我想从 react-hook-form 内部发送动作。

在以下情况下，props.dispatch当 onSubmit 被触发时，我应该使用,进行调度。

但是我不知道如何通过 setState 调度和更新状态。

import React from 'react'
import useForm from 'react-hook-form'

export default function App(props) {
  const { register, handleSubmit, watch, errors } = useForm()
  const onSubmit = data => { 
           console.log(data);
           props.dispatch({type: 'CONFIRM'}); //--> Worked!!  
        }

  console.log(watch('example')) // watch input value by passing the name of it

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input name="example" defaultValue="test" ref={register} />
      <input name="exampleRequired" ref={register({ required: true })} />      
      <input type="submit" />
    </form> …

我创建了一个表单，当用户进行选择时，我想将表单输入的值实时传递给同级组件。

我正在使用 react-hook-form 并且能够成功地使用watch来查看用户输入的值，但我只知道如何将其传递给孩子，而不是兄弟姐妹。

应用程序.js

这是家长

import React from 'react'
import Form from './Form';
import Message from './Message';

const App = () => {
  return (
     <div>
           <Form />
           <Message/>
     </div>
  );
};
export default App;

表单.js

这是孩子。

import React from 'react';
import { useForm } from 'react-hook-form';
import { Select, MenuItem } from '@material-ui/core';
import { Controller } from 'react-hook-form';

function Form() {

const {control, watch } = useForm();    
const watchDiet = watch('diet');

return(
   <form>
          <label htmlFor="diet">Dietary …

我正在替换select应用程序中的一些输入以使用react-select. 在使用之前react-select，我在提交时使用该功能清除了表单中的选定选项.reset()，但现在似乎没有产生任何影响。

onSubmit我尝试在函数中存储一个变量，并将null其设置为defaultValueprop 的值，认为Controller它会重置事物。但这没有用。处理这个问题的干净方法是什么？

父表单组件：

function AddActivityForm(props) {

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

  const onSubmit = (data) => {
    //Additional logic here
    document.getElementById("activity-entry-form").reset();
  };

  return (
    <Form id="activity-entry-form" onSubmit={handleSubmit(onSubmit)}>
          <ActivityPredecessorInput
            activities={props.activities}
            formCont={control}
          />
      <Button variant="primary" type="submit" className="mb-2">
        Submit
      </Button>
    </Form>
  );
}

export default AddActivityForm;

儿童使用Select来自react-select：

function ActivityPredecessorInput(props) {
  const activities = props.activities;
  const options = …

我正在研究一个复杂的反应形式，它几乎没有受控输入以及网格/表格。目前我正在使用react-hook-form进行验证。
这是我的模型。这里的想法是根据需要显示网格，直到用户添加一些数据。用户可以通过单击“+”或“-”按钮添加/删除数据。


当我在这里提交时，我在提交的数据中看到的是

{
  "fname": "sasa",
  "lname": "asasasa"
} 

这是预期的输出

{
  "fname": "sasa",
  "lname": "asasasa",
  "localAddress":[
    {
      "street1":"street1",
      "street2":"street2",
      "city":"city"
    },
    {
      "street1":"street2",
      "street2":"street2",
      "city":"city"
    }
  ]
} 

这是我的codesanbox
Codesanbox

不知道如何将react-table（或任何表组件）与react-hook-form（或任何react形式）集成。使用“react-table”构建表单对我来说是必须的。

感谢任何帮助。

react-hook-form我正在尝试在当前项目中创建表单验证。我已经尝试过不同的方法，但总是因为属性而出错ref。如果我将 更改<FormField>为input，它就会开始工作。知道如何解决这个问题吗？

接触

import React from 'react';
import { useForm } from "react-hook-form";
import FormField from '../../components/FormField';
import Button from '../../components/Button';

const Contact = () => {
    const { handleSubmit, register, errors } = useForm();
    const onSubmit = values => console.log(values);

    return (
        <form onSubmit={handleSubmit(onSubmit)}>
            <FormField
                name="email"
                onChange={() => { console.log("changed!") }}
                ref={register({
                    required: "Required",
                    pattern: {
                        value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i,
                        message: "invalid email address"
                    }
                })}
            />
            <p style={{ color: "red" }}>
                {errors.email && …

我正在尝试加载异步数据并使用它以带有react-hook-form的形式填充material-ui组件。我有一个TextField似乎工作正常，但我似乎无法弄清楚如何让其显示Select正确的值。

这是一个代码沙盒来演示我的问题。

我正在使用文档中推荐的方式Controller来管理：Select

  const { register, handleSubmit, control, reset, setValue } = useForm()

  <TextField name="name" inputRef={register} />
  <Controller
    name="color_id"
    control={control}
    register={register}
    setValue={setValue}
    as={
      <Select>
        {thingColors.map((tc, index) => (
          <MenuItem key={index} value={tc.id}>
            {tc.name}
          </MenuItem>
        ))}
      </Select>
    }
  />

我正在尝试使用 useForm() 填充字段reset，这似乎适用于 TextField。

  useEffect(() => {
    getData().then((result) => {
      reset({
        color_id: 3,
        name: 'Bill'
      });
    });
  }, [reset]);

这似乎正确设置了表单的值，当我提交表单时，它似乎具有正确的name和值color_id。看来我没有正确连接，Select并且控件没有显示我设置的选定值。

如何让我的 Material UISelect在这里显示我的应用价值？

我的项目中有一个配置文件创建表单，我正在使用 react-hooks-form 和 yup 库进行验证。

在表单中有一个名为Github-Username 的字段，这是可选的。但是我想验证它是否用户输入了用户名并且它应该超过 2 个字符，类似这样。

  const schema = yup.object().shape({
    company: yup.string().min(3).required(),
    website: yup.string(),
    location: yup.string().min(2).required(),
    skills: yup.string().min(3).required(),
    githubUsername: yup.string().min(3).nullable().notRequired(),
    bio: yup.string(),
  });

  const { register, handleSubmit, errors, touched } = useForm({
    resolver: yupResolver(schema),
  });

// 表单域

        <Form.Group controlId="formBasicGusername">
          <Form.Label>Github Username</Form.Label>
          <Form.Control
            type="text"
            name="githubUsername"
            ref={register}
          />
          <span className="text-danger text-capitalize">
            {errors.githubUsername?.message}
          </span>
        </Form.Group>

这是我到目前为止编写的架构，它不适用于 githubUsername。如果它是空的，它会显示错误。我只想在它不为空时进行验证。这有什么线索吗？

您好，我正在尝试使用react-hook-form 和material-ui 制作一种形式。我不想每次都为所有文本字段编写控制器。因此，我在另一个文件中声明它并以我的表单调用它，但它不起作用，我不明白为什么，因为在我观看的一些视频中它起作用。有什么问题以及如何解决它？

表单字段

import React from 'react'
import { TextField, Grid } from '@material-ui/core'
import { useForm, Controller, useFormContext  } from 'react-hook-form'

const FormField = ({name, label}) => {
const { control } = useForm()

return (
    <Grid item xs={12} sm={6} >
        <Controller 
            render = {({field}) => 
            <TextField 
                {...field}        
                label={label} required
            />}
            name={name}
            control = {control}
            defaultValue=""
        />
    </Grid>
)
}


export default FormField

地址表

import React from 'react'
import { InputLabel, Select, MenuItem, Button, Grid, Typography, TextField } …

我正在使用 Capacitor、Ionic、React 开发一个应用程序，最近我在第一次使用 React Hook Form 和 YupResolver 时遇到以下错误：

当我尝试运行该项目时，出现以下错误：

Failed to compile
./node_modules/@hookform/resolvers/dist/resolvers.module.js
Attempted import error: 'set' is not exported from 'react-hook-form' (imported as 'o').

我想创建并验证用于更改密码的表单，将新密码提交到外部 API /change-password。表格如下所示：

Actual Password: ...
New Password: ...
Confirm new Password: ...

Submit

组件：

import {
  IonContent,
  IonPage,
  IonItem,
  IonLabel,
  IonButton,
  IonInput,
  IonRow,
  IonAlert,
  IonGrid,
  IonCol,
} from "@ionic/react";
import React, { useState } from "react";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from …

我在用着

"react-hook-form": "7.9.0",

和

"@material-ui/core": "4.11.4",。

我试图通过单击常规按钮并使用 的reset( react-hook-form reset ) 方法来手动重置某些复选框react-hook-form。

由于某种原因，我可以在 React 开发工具中看到“checked”属性更改为 false，但 SwitchBase（v 图标）仍然打开。

你可以看到例子：在这里

感谢您的时间。