Typescript d'accessoires supplémentaires

Question

J'essaie de créer un champ de saisie personnalisé en utilisant Typescript et Formik. Pourrais-je avoir de l'aide sur la meilleure façon de compléter le code ci-dessous ? J'ai besoin d'ajouter des éléments supplémentaires (label et nom)... Je suis bloqué sur ce point depuis un moment et j'espère que j'ai raté quelque chose de très simple !

{/* {label && <label htmlFor={name} className="text-input-label">{label}</label>} */}

Voir la ligne ci-dessus dans le code ci-dessous.

import React from "react";
import styled from "styled-components";
import { FieldHookConfig, useField } from "formik";

interface AdditionalProps {
  label: string;
  name: string;
}

const MyTextInput = (props: FieldHookConfig<string>) => {
  const [field, meta] = useField(props);
  return (
    <div className={"text-input " + props.className}>
      {/* {label && <label htmlFor={name} className="text-input-label">{label}</label>} */}
      <div className="card-backdrop">
        <input {...field} placeholder={props.placeholder} />
      </div>
    </div>
  );
};

export default styled(MyTextInput)``

Merci !!!

Answer 1

Créez une nouvelle interface prop comme ci-dessous et utilisez-la dans votre composant en tant que type de props.

interface ComponentProps<T> {
  config : FieldHookConfig<T>;
  label: string;
  name: string;
}
const MyTextInput = (props: ComponentProps<string>) => {}

Vous pouvez donc utiliser votre configuration formik (FieldHookConfig) dans votre composant comme suit props.config.className ou props.config.placeholder et vous pouvez utiliser vos accessoires supplémentaires comme props.label y props.name

Enfin, votre composant se présente comme suit

import React from "react";
import styled from "styled-components";
import { FieldHookConfig, useField } from "formik";

interface ComponentProps<T> {
  config : FieldHookConfig<T>;
  label: string;
  name: string;
}

const MyTextInput = (props: ComponentProps<string>) => {
  const [field, meta] = useField(props.config);
  return (
    <div className={"text-input " + props.config.className}>
      {props.label && <label htmlFor={props.name} className="text-input-label">{props.label}</label>}
      <div className="card-backdrop">
        <input {...field} placeholder={props.config.placeholder} />
      </div>
    </div>
  );
};

export default styled(MyTextInput)

Answer 2

J'ai trouvé un moyen d'obtenir le résultat souhaité en utilisant formiks Champ d'application & Attributs de champ de la composante.

Je suis en mesure d'utiliser tous les accessoires intégrés de Formiks et le crochet useField avec la possibilité de passer des accessoires supplémentaires pour permettre un contrôle complet sur le style.

Voir ci-dessous le code que j'ai utilisé :)

import React from "react";
import styled from "styled-components";
import { useField, FieldAttributes, Field } from "formik";

type MyTextInputProps = {
  label?: string;
  name: string;
  className?: string;
} & FieldAttributes<{}>;

const MyTextInput: React.SFC<MyTextInputProps> = ({
  label,
  placeholder,
  type,
  className,
  ...props
}) => {
  const [field, meta] = useField<{}>(props);
  return (
    <div className={"text-input " + className}>
      {label && <label className="text-input-label">{label}</label>}
      <div className="card-backdrop">
        <Field placeholder={placeholder} type={type} {...field} />
        {meta.touched && meta.error && (
          <div className="text-input-error">{meta.error}</div>
        )}
      </div>
    </div>
  );
};

export default styled(MyTextInput)

Il est alors appelé avec la commande suivante

<MyTextInput name="displayName" placeholder="Display Name" />