使用 formik 时在标签中显示活动状态

Question

我一直在使用 redux-form 作为表单，但我想切换到 formik，但我找不到显示我的输入字段是否处于活动状态的方法。就像使用 redux-form 时我曾经使用

{label && (
   <Label isActive={meta !== undefined && meta.active} css={labelCss}>
    {label}
   </Label>
)}

但是在 formik 中怎么可能

这是我的代码

const TextField = ({ label, type, ...props }) => {
  const [field, meta] = useField(props);
  const errorText = meta.error && meta.touched ? meta.error : "";
  console.log('meta', meta)
  return (
    <>
      <InputGroup>
        {label && <Label>{label}</Label>}
        <Input type={type} {...field} {...props} />
      </InputGroup>
    </>
  );
};

我在 formik 中没有看到任何活动道具。

Answer 1

您可以使用输入字段支持的 onFocus 道具。

const [active, setActive] = useState(false)

<Input
  onBlur={() => setActive(false)}
  onFocus={() => setActive(true)}

  {...otherProps}

/>

使用 formik 时在标签中显示活动状态

show active state in label when using formik

javascript

reactjs

formik