Tajuk ditulis semula kepada: "Panggilan Hook tidak sah dalam bentuk react-hook"

Question

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:

<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

Ini sepatutnya berfungsi secara teori, tetapi dalam amalan akan memberikan Ralat Panggilan Cangkuk Tidak Sah.

Answer 1

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

Kemudian di dalam komponen memanggil useForm:

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

Anda boleh mendapatkan maklumat lanjut dalam artikel ini.