标签: react-hook-form

我想知道是否可以使用 Zod 来确定何时需要字段，以便我可以将此布尔值传递给输入，例如<input required={/* Use Zod to determine this value */} />。我问的主要原因是出于样式目的，例如*在需要该字段时显示。

const Component = () => {
  const schema = z.object({
    name: z.string(),
    address: z.string().optional(),
  });

  type FormValues = z.infer<typeof schema>;

  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm<FormValues>({
    defaultValues: {
      name: '',
      address: undefined,
    },
    resolver: zodResolver(schema),
  });

  const onSubmit = handleSubmit((data) => console.log(data));

  return (
    <form onSubmit={onSubmit}>
      <input
        {...register('name', {
          required: /* Use Zod to determine this value */,
        })} …

我正在使用 shadcn 的react-hook-form，我已经设法导航文档以获取我需要的输入和选择，但我创建的 onSubmit 函数没有执行任何操作。

有谁知道为什么？

"use client";

import * as z from "zod";
import { SubmitHandler, useForm, UseFormRegister } from "react-hook-form";
import { zodResolver } from "@hookform/resolvers/zod";
import { Input } from "./ui/input";
import ErrorMessage from "./ErrorMessage";
import { Button } from "./ui/button";
import {
  Form,
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from "./ui/Form";
import { Textarea } from "./ui/textarea";

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";
import toast from "react-hot-toast";

type ReminderFormSchemaType = z.infer<typeof …

我正在使用React Hook Form以验证一些简单的输入：

import React from "react";
import useForm from "react-hook-form";

import "./App.css";

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

  return (
    <div className="App">
      <header className="App-header">
        <form onSubmit={handleSubmit(onSubmit)}>
          <input
            className="mkn-input"
            name="firstName"
            placeholder="First name"
            ref={register({
              required: true,
              maxlength: 20,
              message: "invalid first name"
            })}
          />
          <span> {errors.firstName && errors.firstName.message}</span>

          <input
            placeholder="Last name"
            className="mkn-input"
            name="lastName"
            ref={register({
              pattern: /^[A-Za-z]+$/i,
              message: "Invalid last name"
            })}
          />
          {errors.lastName && <span> errors.lastName.message</span>} …

我有一个包含KeyboardDatePickerfrom的表单，当没有值传递给该字段的钩子时material UI，我希望它有一个空字符串值 ( "") 作为默认值useForm。

到目前为止，这是我的实现：

日期选择器输入字段：

                <MuiPickersUtilsProvider utils={DateFnsUtils}>
                    <Controller
                        name="date"
                        control={control}
                        rules={{ required: true }}
                        defaultValue={getValues().date || ""}
                        as={
                            <KeyboardDatePicker
                                autoOk
                                inputVariant="outlined"
                                format="yyyy-MM-dd"
                                margin="normal"
                                id="date-picker-inline"
                                label="Date"
                                placeholder="yyyy-mm-dd"
                                required
                                error={!!errors.date}
                                helperText={errors.date && "Incorrect entry."}
                                onChange={() => {}}
                                value={() => {}}
                                KeyboardButtonProps={{
                                    "aria-label": "change date",
                                }}
                            />
                        }
                    />
                </MuiPickersUtilsProvider>

这是我对表单的钩子：

const { handleSubmit, getValues, control, register, errors, setValue } = useForm<Project>({
    submitFocusError: false,
    mode: "onBlur",
    defaultValues: project,
});

我正在使用 a projectbut project …

这是我第一次使用钩子我不知道如何在提交后清除输入字段，form.reset() 不起作用

import { useForm } from "react-hook-form";
import....

export default function AddUser() {
  const URL = "http://localhost:3000/AddUser";
  const { register, handleSubmit, errors } = useForm();

  const onSubmit = (data) => {
    if (data) {
      axios.post(URL, data);
    }
form.reset()
  };

这是返回部分

  return (
      <form onSubmit={handleSubmit(onSubmit)} noValidate>
        <div className="container">
              <input type="text" name="name" placeholder="Name" ref={register({required: true})}/> 

              <input type="radio" name="gender" value="male" ref={register({ required: true })}/>:Male

              <input type="radio" name="gender" value="female" ref={register({ required: true })}/:Female
            <button type="submit" className="btn "> add</button>
        </div>
      </form>
  );
}

提前致谢 …

我已经开始使用新的 React-Hook-form 库，并希望在 Change 而不是 Submit 上提交我的输入字段。另外，我计划使用 Lodash 的 debounce 来避免重新渲染

这是我迄今为止尝试过的：

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

import "./styles.css";

export default function App() {
  const { register, handleSubmit, setValue } = useForm();
 

  useEffect(() => {
    register({ name: "firstName" }, { required: true });
  }, [register]);

  return (
    <form>
      <input
        name="firstName"
        onChange={(e) => {
          setValue("firstName", e.target.value);
          handleSubmit((data) => console.log("data", data));
        }}
      />
    </form>
  );
}

const rootElement = document.getElementById("root"); …

要在react-hook-form中使用Material-ui，您应该使用<Controller和render方法而不是“as = {xy-control}”也不应该混合控制器和inputRef = {register}。单个控件也没有问题。但是Material-ui中有一个复合控件。“FormControlLabel + CheckBox”如何将这个控件集成到控制器中。我所有的尝试都失败了。

这就是它的工作原理，但我希望 FormControlLaben 包含在控制器中。有人有什么想法吗？

                 <Controller
                    name="password"
                    control={control}
                    defaultValue={""}
                    render={(props) => <TextField {...props}
                                                  variant="outlined"
                                                  margin="normal"
                                                  required
                                                  fullWidth
                                                  label="Password"
                                                  type="password"
                                                  id="password"
                                                  autoComplete="current-password"
                    />}
                />

                <FormControlLabel
                    control={
                        <Checkbox
                            inputRef={register}
                            name="remember"
                        />
                    }
                    label="remember"
                />


{/*That works, but it requires an OnChange. Why can't the controller bind it?*/}
                <FormControlLabel
                    control={
                        <Controller
                            name={"remember2"}
                            control={control}
                            render={(props) => (
                                <Checkbox
                                    {...props}
                                    onChange={(e) => props.onChange(e.target.checked)}

                                />
                            )}
                        />
                    }
                    label="remember"
                />

我正在使用带有react-hook-form库的react-select下拉菜单。我正在调用 api 来获取反应选择的默认值。最初，下拉列表无法预填充默认值。所以我找到了一个解决方法，当我从 api 获取数据时重新渲染整个 JSX。

<form onSubmit={handleSubmit(saveData)}>
{!countryValue && (
      <Controller
        name="country"
        control={control}
        render={({ onChange, value, ref }) => (
          <Select
            options={country}
            value={country.find((c) => c.value === value)}
            onChange={(val) => onChange(val.value)}
          />
        )}
        rules={{ required: true }}
      />
    )}
    {countryValue && (
      <Controller
        name="country"
        control={control}
        render={({ onChange, value, ref }) => (
          <Select
            options={country}
            value={country.find((c) => c.value === value)}
            onChange={(val) => onChange(val.value)}
            defaultValue={country.find((c) => c.value === countryValue)}
          />
        )}
        rules={{ required: true }}
      />
    )}
{errors.country && <div>Field is rquired</div>} …

我想使用 Material-UI 单选按钮，react-hook-form更新后验证抛出以下错误：

transformToNestObject is not a function

包装Controller不正确吗？

沙盒示例

  <Controller
    render={({ field, fieldState }) => (
      <RadioGroup {...field} aria-label="option">
        <FormControlLabel
          value="A"
          control={<Radio size="small" color="primary" />}
          label="A"
        />
        <FormControlLabel
          value="B"
          control={<Radio size="small" color="primary" />}
          label="B"
        />
      </RadioGroup>
    )}
    name="option"
    control={control}
  />

大家好，

我使用反应钩子形式，我想在一个文本输入上动态设置所需的内容。我有一个 useState 来跟踪交付方法和更新该状态的单选按钮。然后所需的文本输入应该动态地基于该状态。因此，如果送货方式是“送货”，我们需要您的地址，如果是“取货”，我们不需要您的地址。我希望这是有道理的。

在下面的代码中，显示/隐藏功能按预期工作，但动态要求却不然。

const [ delivery, setDelivery ] = useState(false);

<InfoBlock>
  <strong>Delivery Method</strong>
  <RadioGroup>
    <RadioBlock>
      <input type="radio" id="pickup" name="pickup" {...register("deliveryMethod", {required: true})} 
        value="pickup" onClick={() => setDelivery(false)} />
      <h5>Pickup</h5>
    </RadioBlock>                
    <RadioBlock>
      <input type="radio" id="deliver" name="delivery" {...register("deliveryMethod", {required: true})}  
        value="delivery" onClick={() => setDelivery(true)} />
      <h5>Delivery</h5>
    </RadioBlock>                   
  </RadioGroup>
</InfoBlock>
<ErrorMsg>
  {errors.deliveryMethod && errors.deliveryMethod.type === 'required' && "Please select delivery method"}
</ErrorMsg>

{delivery ? 
  <div>
    <InfoBlock>
      <strong>Address</strong>
      **<input type="text" id="address" name="address" 
        {...register("address", {required: delivery })}  />**
    </InfoBlock>
    <ErrorMsg>
      {errors.address && errors.address.type === …