Titel umgeschrieben in: „Ungültiger Hook-Aufruf in React-Hook-Form'

Question

Ich bin ein Neuling in der Reaktion auf Hook-Formen, daher könnte es eine einfache Frage sein. Ich habe gerade herausgefunden, dass der Controller den Wert nicht als Zahl verwenden kann. Das hat mich sehr geärgert, aber schließlich habe ich die Lösung im Github-Problem Nr. 8068 gefunden, das wie folgt beschrieben wird: Richten Sie eine onChange-Funktion ein, etwa so:

<Controller
- Regeln={{ valueAsNumber: true }}
      render={({ field }) =>
          <Eingabe
- onChange={field.onChange}
+ onChange={(event) => field.onChange(+event.target.value)}
              type="Nummer"
          />
  )}
/>

Also habe ich es ein wenig modifiziert und den folgenden Code erhalten:

import React, { ChangeEvent } from 'react'
{ Controller } aus 'react-hook-form' importieren
importiere { getPlaceholder } aus './getPlaceholder'
importiere { IInput } aus './types'

const NumberInput: React.FC<IInput> = ({ control, name, ...props }) =>
  const placeholder = getPlaceholder({ type: "number" });
  const numericOnChange = (event: ChangeEvent<HTMLInputElement>) =>
    if (event.target.value === '') return null;
    return +event.target.value;
  }

  zurückkehren (
    <Controller
      Kontrolle={Kontrolle}
      name={name}
      render={({ field: { onChange, ...field } }) =>
        <Eingabe
          {...Requisiten}
          {...Feld}
          type="Nummer"
          placeholder={placeholder}
          onChange={(event) =>
            const value = numericOnChange(event)
            onChange(Wert)
          }}
          className="h-[20px] pl-[4px] py-[8px] bg-transparenter Rand-b
          border-b-[#646464] focus:border-b-[#3898EC] text-[13px]
          text-[#F00] placeholder-[#646464] Outline-none m-1 w-full"
        />
      )}
    />
  )
}

Standard-NumberInput

exportieren

Theoretisch sollte dies funktionieren, in der Praxis wird jedoch ein Fehler aufgrund eines ungültigen Hook-Aufrufs angezeigt.

Answer 1

将 NumberInput 组件单独定义，然后在表单内直接使用 Controller 包装：

// NumberInput.js
export const NumberInput = ({ value, onChange, ...rest }) => {
  const handleChange = (e) => {
    onChange(Number(e.target.value));
  };
 
  return (
    <input
      type="number"
      min={0}
      onChange={handleChange}
      value={value}
      {...rest}
    />
  );
};

然后在调用 useForm 的组件内：

<Controller
  name='number'
  control={control}
  render={({ field: { ref, ...field } }) => (
    <NumberInput {...field} type="number" />
  )}
/>

你可以在 这篇文章 中找到更多信息。