Formik useField 钩子不传递名称或标签道具？

Question

我的目标确实不太复杂，我需要表单字段（输入、select 和日期）的自定义行为onBlur()。

我从输入开始，因为 select 和日期选择器组件有额外的要求，可能是包。

根据文档，我应该能够创建一个自定义组件并将其与 <Field as /> 或 <Field component /> 一起使用，但两者都无法按我预期（或希望）的方式工作。

似乎我遗漏了一些非常基本的东西，但我映射了具有如下结构的数据：

interface CaseSummaryFiltersInterface {
  order: number;
  name: string;
  testid: string;
  label: string;
  // ...superfluous stuff...
}

// Part of Form component
{filters?.map((filter, filterIndex) => {
  return <Field name={filter.name} component={CustomInput} />;
})}

// CustomInput.tsx
type CustomInputProps = {
  name: string;
  label: string;
  type?: 'InputType';
  className?: string;
} & Omit<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, 'size'>;

export const CustomInput: FC<CustomInputProps> = props => {
  const [field] = useField({
    name: props.name,
  });
  console.log(props.name); // undefined
  console.log(field); // {name: undefined, values: {...thingsIneed} }

  const handleUpdate = (e: ChangeEvent<HTMLInputElement>) => {
    // things I need to do
  };

  return (
    <div data-testid="form-control">
      <input
        type="text"
        {...field}
        className={FormStyles.formInput}
        onBlur={handleUpdate}
        name={props.name}
      />
    </div>
  );
};

如果我只是单独使用 <Field />，那么我可以访问我需要的所有内容，但 none 需要的功能。有什么建议吗？

Answer 1

您正在混合使用组件属性和 useField 挂钩。

如果您想使用组件道具，您的 CustomInput 组件将接收道具字段和表单。要访问字段名称，您必须使用 props.field.name 而不是 props.name

如果你想使用 useField 钩子，你根本不需要使用 <Field />。只需使用 <CustomInput name="name" />

更多信息请访问 https://formik.org/docs/api/field#component and https://formik.org/docs/api/useField

Formik useField 钩子不传递名称或标签道具？

Formik useField hook doesn't pass name or label props?

reactjs

formik