<p>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: </p> <pre class="brush:php;toolbar:false;"><Controller - Regeln={{ valueAsNumber: true }} render={({ field }) => <Eingabe - onChange={field.onChange} + onChange={(event) => field.onChange(+event.target.value)} type="Nummer" /> )} /></pre> <p>Also habe ich es ein wenig modifiziert und den folgenden Code erhalten: </p> <pre class="brush:php;toolbar:false;">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</pre> exportieren <p>Theoretisch sollte dies funktionieren, in der Praxis wird jedoch ein Fehler aufgrund eines ungültigen Hook-Aufrufs angezeigt. </p>

// 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}
    />
  );
};

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