标签: react-hook-form

我正在使用 react-hook-forms Controller api 围绕来自 react-select 的 AsyncSelect 加载选项，因为用户从外部 API 键入。一切正常，除了返回的值作为字符串"[object Object]"而不是对象的 fullName 属性返回。

我的组件：

           <Controller
            control={control}
            name="businessCategory"
            as={
              <AsyncSelect
                className="react-select-container"
                loadOptions={v => handleAutocompleteLookup(v)}
                onChange={handleCategoryInputChange}
                getOptionLabel={option => option.name}
                getOptionValue={option => option.fullName}
              />
            }
          />

我的 handleChange 函数。SetValue 来自 react-hook-form：

  const handleCategoryInputChange = newValue => {
    return setValue('businessCategory', newValue, true);
  };

我的任何数据都是具有以下形状的对象数组：

{
  fullName: "DJ service"
  id: "gcid:dj"
  name: "DJ service"
  publisher: "GMB"
}

任何有关这方面的线索将不胜感激，谢谢！

我很难弄清楚如何处理不一定与react-hook-form. 换句话说，我如何处理handleSubmit错误？

例如，具有以下形式：

import to from 'await-to-js'
import axios, { AxiosResponse } from 'axios'
import React from "react"
import { useForm } from "react-hook-form"

type LoginFormData = {
  username: string,
  password: string,
}

export const Login: React.FC = () => {
  const { register, handleSubmit } = useForm<LoginFormData>()

  const onSubmit = handleSubmit(async (data) => {
    const url = '/auth/local'

    const [err, userLoginResult] = await to<AxiosResponse>(axios.post(url, data))
    if (userLoginResult) {
      alert('Login successful')
    }
    else if (err) { …

我在使用react-hook-form 和material-ui 时遇到了困难。

我准备了一个codesandbox示例。

import { TextField } from "@material-ui/core";
import React from "react";
import { useForm } from "react-hook-form";
import "./styles.css";

interface IMyForm {
  vasarlo: string;
}

export default function App() {
  const {
    handleSubmit,
    formState: { errors },
    register
  } = useForm<IMyForm>();

  const onSubmit = (data: IMyForm) => {
    alert(JSON.stringify(data));
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label>First Name</label>
      <TextField
        variant="outlined"
        margin="none"
        label="Test"
        {...register("vasarlo", {
          required: "error text"
        })}
        error={errors?.vasarlo ? true : false}
        helperText={errors?.vasarlo ? errors.vasarlo.message : …

我试图从我的输入中抛出所需的错误，我已将其包装在react-hook-form版本 7 的控制器组件中。

我的输入是一个 Material-UI TextField；

<Controller
                        
    name="firstName"
    control={control}
    defaultValue=""
    rules={{ required: true}}
    render={({field}) =>
        <TextField
        id="firstName"
        name="firstName"
        autoComplete="fname"
        variant="outlined"
        fullWidth
        label="First Name"
        autoFocus={true}
        {...field} />
    }
/>

我想在规则失败时暴露错误。

我想从下面的验证开始创建自定义验证。但到目前为止我还没有成功。我访问了这个网站并遵循了他的“自定义验证规则”中的代码，但我无法复制它。

该isBefore方法工作正常，但验证却不行。我们如何通过自定义验证添加自定义消息？

const isBefore = (date1, date2) => moment(date1).isBefore(moment(date2));

const rules = {
    publishedDate: {
        required: 'The published date is required.',
        before: isBefore(scheduledDate, expiredDate)
    },
}

<Controller
    control={control}
    name="publishedDate"
    rules={rules.publishedDate}
    render={({ onChange }) => (
        <DatePicker
            className="mb-px-8"
            onChange={(value) => {
                setPublishedDate(value);
                onChange(value);
            }}
            minDate={new Date()}
            value={publishedDate}
        />
    )}
/>

我使用 useController 进行文本输入，但无法为自定义验证设置错误消息。我假设我能够使用具有与内置验证类似的值/消息的对象，但TypeError: validateFunction is not a function如果我尝试这样做，则会收到错误。

这工作正常：

<TextInput
                control={control}
                name={`email`}
                label={`Email *`}
                rules={{
                    required:true,
                    validate: {
                        checkEmail: v => validateEmail(v)
                    }
                }}
            />

我想做的事：

<TextInput
                control={control}
                name={`email`}
                label={`Email *`}
                rules={{
                    required:true,
                    validate: {
                        checkEmail: {
                            value: v => validateEmail(v),
                            message: 'Invalid email'
                        }
                    }
                }}
            />

我的 TextInput 组件当前如下所示：

import style from "./form.module.scss"
import classnames from "classnames";
import { useController, useForm } from "react-hook-form";

export default function TextInput(props){

    const {
        field: { ref, ...inputProps },
        fieldState: …

我有一个带有选择字段的简单表单，它是用于验证和所有内容的react-hook-form 。有一个Controller呈现 Material UI Select。我想从组件外部（在所有控件所在的表单根目录中）使用setValue设置此类选择的值。
这是我正在使用的代码（稍微简化，以免浪费太多时间）

type Props = {
  name: string;
  control: Control<any>;
  options: SelectOptions[];
};
const Select: FunctionComponent<Props> = ({
  name,
  control,
  options,
}) => (
  <Controller
    control={control}
    name={name}
    render={({ field: { onChange, value } }) => {
      return (
        <FormControl>
          <MuiSelect onChange={onChange}>
            {options.map((o) => (
              <MuiSelectItem key={o.key} value={o.value}>{o.label}</MuiSelectItem>
            ))}
          </MuiSelect>
        </FormControl>
      )
    }}
  />
);

至于改变选择的值，setValue效果很神奇。当我提供一个新值时，它会按预期工作。问题（我猜）是组件没有重新渲染，所以旧值仍然显示。我不知道如何解决这个问题，文档也没有多大帮助。非常感谢任何帮助，谢谢！

使用 React Hook Form 和 material-ui 复选框组件提交表单构建时出现错误。复选框的数量是从我的 api 列表中构建的：

        <Grid item xs={12}>
          <FormControl
            required
            error={errors.project?.stack ? true : false}
            component='fieldset'>
            <FormLabel component='legend'>Tech Stack</FormLabel>
            <FormGroup>
              <Grid container spacing={1}>
                {techs.map((option, i) => (
                  <Grid item xs={4} key={i}>
                    <FormControlLabel
                      control={
                        <Checkbox
                          id={`stack${i}`}
                          name='project.stack'
                          value={option.id}
                          inputRef={register({required: 'Select project Tech Stack'})}
                        />
                      }
                      label={option.name}
                    />
                  </Grid>
                ))}
              </Grid>
            </FormGroup>
            <FormHelperText>{errors.project?.stack}</FormHelperText>
          </FormControl>
        </Grid>

提交表单时，我收到以下错误（多次，每个复选框呈现 1 个）：

Uncaught (in promise) Error: Objects are not valid as a React child (found: object with keys {type, message, ref})。如果您打算渲染一组子项，请改用数组。

我不明白这个错误。该消息显然表明这是一个渲染问题，但组件渲染良好。问题发生在提交。有什么建议吗？ …

我正在尝试使用react-hook-form 的钩子创建一个动态表单useFieldArray。用户应该能够添加或删除字段，从而使其动态化。我查看了本教程以获取灵感，但缺少的部分是如何对状态实现错误验证，这将是一个对象数组：{email: string}[]。（该对象将采用更多键/值对。为了简单起见，我省略了其余部分。）

我尝试过使用yup作为验证模式。它看起来像这样：

const schema = yup.array().of(
  yup.object().shape({
    email: yup.string().email().required(),
  }),
)

React-hook-form 的实现是：

import * as yup from 'yup'
import { yupResolver } from '@hookform/resolvers/yup'
import { useForm, useFieldArray, Controller } from 'react-hook-form'

const { register, control, handleSubmit, errors } = useForm({
  resolver: yupResolver(schema),
  mode: 'onChange',
})
const { fields, append, remove } = useFieldArray({
  control,
  name: 'users',
})

该表格或多或少是根据上面链接中的教程进行的。

error当控制台从钩子记录对象时useForm，它始终给出一个空对象{}。看起来好像不起作用。我可能在这里遗漏了一些东西。问题是什么？

我正在创建一个身份验证表单，并参考react-hook-form文档了解如何使用 yup 验证我的输入。据我所知，一切都与文档中提供的实现几乎相同。但是，我在解析器上收到错误useForm（如下所示）。知道我哪里出错了吗？

• "react-hook-form": "^7.15.2"
• "yup": "^0.32.9"
• "@hookform/resolvers": "^2.8.1"

错误

代码

interface IFormInputs {
  email: string;
  password: string;
  passwordConfirm: string;
}

const schema = yup.object().shape({
  email: yup.string().required(),
  password: yup.string().required(),
  passwordConfirm: yup.string().required(),
});

const SignUp = (): JSX.Element => {
  const {
    control,
    handleSubmit,
    getValues,
    formState: { errors },
  } = useForm<IFormInputs>({ resolver: yupResolver(schema) });

  const onSubmit: SubmitHandler<IFormInputs> = () => {
    const values = getValues();
    console.log('values', values);
  };

  return (
    <div>
      <StyledPaper>
        <StyledTypography>Sign Up</StyledTypography>
        <form onSubmit={handleSubmit(onSubmit)}> …