<p>Saya baru untuk bertindak balas dalam bentuk cangkuk, jadi ini mungkin soalan mudah. Saya baru sahaja mendapati bahawa Pengawal tidak boleh menggunakan nilai sebagai nombor. Ini sangat mengganggu saya, tetapi akhirnya saya menemui penyelesaian dalam isu github #8068, diterangkan seperti berikut: Sediakan fungsi onChange, seperti ini: </p> <pre class="brush:php;toolbar:false;"><Pengawal - peraturan={{ valueAsNumber: true }} render={({ medan }) => <masukan - onChange={field.onChange} + onChange={(event) => field.onChange(+event.target.value)} type="nombor" /> )} /></pra> <p>Jadi saya mengubah suainya sedikit dan mendapat kod berikut: </p> <pre class="brush:php;toolbar:false;">import React, { ChangeEvent } daripada 'react' import { Controller } daripada 'react-hook-form' import { getPlaceholder } daripada './getPlaceholder' import { IInput } daripada './types' const NumberInput: React.FC<IInput> const pemegang tempat = getPlaceholder({ jenis: "nombor" }); const numericalOnChange = (acara: ChangeEvent<HTMLInputElement>) => jika (event.target.value === '') return null; pulangkan +event.target.value; } kembali ( <Pengawal kawalan={kawalan} nama={nama} render={({ medan: { onChange, ...field } }) => <masukan {...props} {...medan} type="nombor" pemegang tempat={tempat letak} onChange={(event) => nilai const = numericalOnChange(event) onChange(nilai) }} className="h-[20px] pl-[4px] py-[8px] bg-sempadan lutsinar-b sempadan-b-[#646464] fokus:border-b-[#3898EC] teks-[13px] teks-[#F00] pemegang tempat-[#646464] garis besar-tiada m-1 w-penuh" /> )} /> ) } eksport NumberInput lalai</pre> <p>Ini sepatutnya berfungsi secara teori, tetapi dalam amalan akan memberikan Ralat Panggilan Cangkuk Tidak Sah. </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" />
  )}
/>