Titre réécrit comme suit : "Appel Hook invalide sous forme de crochet de réaction"

Question

Je suis nouveau dans la réaction aux formulaires de crochet, cela pourrait donc être une question simple. Je viens de découvrir que le contrôleur ne peut pas utiliser la valeur comme nombre. Cela m'a beaucoup ennuyé, mais j'ai finalement trouvé la solution dans le problème github n°8068, décrit comme suit : Configurez une fonction onChange, comme ceci :

<Contrôleur
- règles = {{ valueAsNumber : true }}
      render={({ champ }) =>
          <entrée
- onChange={champ.onChange}
+ onChange={(événement) => field.onChange(+event.target.value)}
              type="numéro"
          />
  )}
/></pré>
<p>Je l'ai donc un peu modifié et j'ai obtenu le code suivant : </p>
<pre class="brush:php;toolbar:false;">importer React, { ChangeEvent } depuis 'react'
importer {Contrôleur} depuis 'react-hook-form'
importer { getPlaceholder } depuis './getPlaceholder'
importer { IInput } depuis './types'

const NumberInput : React.FC<IInput> = ({ contrôle, nom, ...props }) =>
  const placeholder = getPlaceholder({ type : "numéro" });
  const digitalOnChange = (événement : ChangeEvent<HTMLInputElement>) =>
    if (event.target.value === '') renvoie null ;
    return +event.target.value ;
  }

  retour (
    <Contrôleur
      contrôle={contrôle}
      nom={nom}
      render={({ champ : { onChange, ...champ } }) =>
        <entrée
          {...accessoires}
          {...champ}
          type="numéro"
          placeholder={placeholder}
          onChange={(événement) =>
            valeur const = numériqueOnChange (événement)
            onChange (valeur)
          }}
          className="h-[20px] pl-[4px] py-[8px] bg-transparent border-b
          border-b-[#646464] focus:border-b-[#3898EC] text-[13px]
          text-[#F00] placeholder-[#646464] outline-none m-1 w-full"
        />
      )}
    />
  )
}

exporter par défaut NumberInput

Cela devrait fonctionner en théorie, mais en pratique, cela donnera une erreur d'appel de crochet invalide.

Answer 1

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

Puis à l'intérieur du composant appelant useForm :

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

Vous pouvez trouver plus d'informations dans cet article.