标签: react-hook-form

我正在使用 React useForm 钩子从表单提交数据。要求是用户在提交之前应该在预览 div 中看到示例数据。如何从输入文本框中获取值并将其显示在输入旁边的 div 中。文档中有 getValue 方法可以使用吗？

<form>
<div class="mb-6">
            <label  class="block mb-2">Enter Title: </label>
            <input  type="text" id="page_text" class="text-white" placeholder="Enter Title" {...register('page_Title',{ required: "Enter Your Title", maxLength: {value:255,message:"Cannot Exceed more 255 Characters" } })}/>
</div>
</form>
<div className= "text-white text-center rounded-xl shadow-xl">
            <h1>Preview</h1>
            <h3>{getValues("page_Title")}</h3>
</div>

我正在尝试从此 JSON 文件ZipCode / City / State创建（意大利语CAP / Citt\xc3\xa0 / Provincia）依赖字段（这里也是存储库）。我正在使用 React Hook Form v7 和 MUI v5.4.4。我想使用 MUI Autocomplete 组件和props 来实现这 3 个字段，以便让用户插入自定义输入值（如果 JSON 列表中不存在）。FreeSolo

我试图让它发挥作用，但没有成功。我怎样才能实现它？此外，自动完成组件的验证不起作用。

这是我写的codesandbox

我有一个可重复使用的组件，称为 DatePicker，如下所示

export interface IPDatePicker extends IProps {
  control: any
  label: string
  placeholder: string
  value?: string
  errorText?: string
  isRequired?: boolean
  name: string
  defaultValue?: any
  onChangeText: (value: string) => void
  minimumDate?: any
  maximumDate?: any
  timeOnly?: boolean
  hideLabel?: boolean
  labelMaxLine?: number
  //   setDateValue: any
}

const DatePicker: React.FC<IPDatePicker> = props => {
  const todaysDate = new Date()
  const [date, setDate] = useState<Date>(todaysDate)
  const [isDatePickerOpen, setIsDatePickerOpen] = useState(false)
  return (
    <Controller
      name={props?.name}
      defaultValue={props?.defaultValue}
      control={props?.control}
      render={({field: {onChange, value}}: any) => {.....}
    />    

关键是，组件需要“控制”作为强制参数。

“控件”来自使用 …

我在 React Hook Form 中输入了 radio，我尝试将其用作真正的布尔值，而不是字符串。

我知道 RHF 必须valueAsNumber将其转换为数字。我认为这setValueAs是允许任何转换的通用方法，但我无法使其工作。

代码沙盒

\nconst schema = z.object({\n  name: z.string().min(4, { message: "4 caract\xc3\xa8res minimum pour le name" }),\n  developer: z.boolean() // A real boolean is expected here\n});\n\nexport default function App() {\n  const {\n    register,\n    handleSubmit,\n    watch,\n    formState: { errors }\n  } = useForm({\n    resolver: zodResolver(schema),\n    defaultValues: {\n      name: "John",\n      developer: false // default as boolean\n    }\n  });\n\n  return (\n    <form onSubmit={handleSubmit(onSubmit)} noValidate>\n      <input type="text" placeholder="Name" {...register("name")} …

我有两个日期字段，开始日期和结束日期。我想知道如何设置验证以不接受开始日期高于结束日期，反之亦然。

阅读 yup 文档我看到了when 条件，但它只是从其他字段获取值！

import { date, object } from 'yup';

export const yupSchema = object({
  startAt: date().typeError('Invalid date').nullable(),
  endAt: date().typeError('Invalid date').nullable(),
});

描述

我有一个使用对象作为值的组件。

我想使用这个组件react-hook-form

问题是react-hook-form认为我的对象是嵌套表单控件

设置

这只是一个例子。

范围日期选择器是这种行为的常见用例

代码笔示例

组件接受的值：

type ComponentValue = {
  a: string;
  b: string;
}

组件：

const Component = ({ value, onChange }: { value: ComponentValue, onChange: (value: ComponentValue) => void }) => {
  return (
    <input value={value.a} onChange={e => onChange({ a: e.target.value, b: (Math.random() * 100 | 0).toString() }) } />
  )
}

表格值

type FormValues = {
  someField: ComponentValue;
  // other fields
};

默认值：

const defaultValues = {
  someField: {
    a: 'Default …

我在使用反应钩子形式 usefield 数组时遇到问题。基本上我正在尝试追加和删除，但问题是当我删除它时仅删除最后一个元素。附加工作正常，但假设如果我有 3 个值为 a、b、c 的字段，并且我想删除 b，当我按下 b 的删除按钮时，它会删除 c，如果我尝试再次删除 a，它也会删除 c仅从用户界面。

这是我的 codesandbox 代码链接： Codesandbox

我有以下带有 RHF 控制器和 MUI 文本字段的字段：

<Controller
  control={control}
  name="name"
  defaultValue=""
  rules={{
    required: true,
    minLength: 3,
    maxLength: 300,
    validate: wtf,
  }}
  render={({ field, fieldState: { error } }) => (
    <TextField
      {...field}
      fullWidth
      label="Name"
      size="small"
      helperText={formState?.errors?.name?.message}
      error={error !== undefined}
    />
  )}
/>

输入更改时不会调用 wtf 方法。我尝试过不同的重新验证模式，但这根本没有触发。我在这里错过了什么吗？我检查过示例和教程，它们似乎都是这样做的。

我正在使用 radix ui 原语 Select，但我不知道如何将它与 React Hook Form 集成。我尝试将寄存器放在 Select.Root 标记中，但没有成功。

我还使用样式化组件，因此所有 Select 标签都像 <S.Something/> 一样使用，因为我已将所有标签导入为 S

这是创建项目的函数：

const SelectItem = React.forwardRef(({ children, ...props } : any, forwardedRef) => {
        return (
          <S.Item  {...props} ref={forwardedRef}>
            <S.ItemText>{children}</S.ItemText>
            <S.ItemIndicator>
              <S.TriggerIcon src="/form/selector-icon.svg" />
            </S.ItemIndicator>
          </S.Item>
        );
      });

然后我这样创建选择：

   <S.FormItem key={index}>
      <S.Label htmlFor={index+''}>{question.question}</S.Label>
      <S.Root {...register(`${questionName}`, { required: true })}>
           <S.Trigger id={index+''}>
               <S.Value/>
               <S.Icon>
               <S.TriggerIcon src="/form/selector-icon.svg" />
               </S.Icon>
           </S.Trigger>
       <S.Portal>
          <S.Content>
             <S.SelectorUp>
                 Up
             </S.SelectorUp>
             <S.Viewport>
                  {question.options?.map((option, i) => {
                       return (
                            <SelectItem key={i} value={option}>
                                {option} …

我在 react-hook-form doc 中检查这个例子：https : //codesandbox.io/s/react-hook-form-v6-controller-qsd8r? file =/ src/ index.js

奇怪的是按钮没有type="submit"。但是点击后仍然触发提交事件。

它如何知道哪个按钮是提交按钮？