Formik - Ошибка ввода пользовательского типа при использовании onChange - PullRequest
Новая
       48

Formik - Ошибка ввода пользовательского типа при использовании onChange

0 голосов
/ 17 января 2020

Если я использую элемент в обычной форме, он работает как положено, но внутри формы Formik я получаю следующую ошибку: 

Uncaught TypeError: Cannot read property 'persist' of undefined
    at formik.esm.js:583
    at formik.esm.js:619
    at inc (InputNumber.tsx:124)
    at onClick (InputNumber.tsx:149)
    at HTMLUnknownElement.callCallback (react-dom.development.js:149)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:199)
    at invokeGuardedCallback (react-dom.development.js:256)
    at invokeGuardedCallbackAndCatchFirstError (react-dom.development.js:270)
    at executeDispatch (react-dom.development.js:561)
    at executeDispatchesInOrder (react-dom.development.js:583)

Вот код, который я пытаюсь use (некоторые стилевые компоненты были удалены для удобства чтения): 

import React, { ChangeEvent } from 'react';
import styled from 'styled-components';
import { Icon, ArrowDown, ArrowTop } from './../Icon';
import { Label } from './Label';
import { LabelError } from './LabelError';
type InputNumberProps = {
  id: string;
  errorMessage?: string;
  label?: string;
  min?: string;
  max?: string;
  onBlur: (event: ChangeEvent<HTMLInputElement>) => void;
  onChange: (event: ChangeEvent<HTMLInputElement>) => void;
  placeholder?: string;
  prefix?: string;
  readonly?: boolean;
  step?: string;
  value: string;
  width?: string;
};
const InputNumber = ({
  errorMessage,
  id,
  value,
  label,
  min,
  max,
  onBlur,
  onChange,
  step,
  prefix,
  width
}: InputNumberProps) => {
  const increase = (e: any) => {
    e.preventDefault();
    const targetInput = e.target.parentNode.parentNode.getElementsByTagName('INPUT')[0];
    onChange(targetInput.stepUp());
  };
  const decrease = (e: any) => {
    e.preventDefault();
    const targetInput = e.target.parentNode.parentNode.getElementsByTagName('INPUT')[0];
    onChange(targetInput.stepDown());
  };
  return (
    <Wrapper width={width}>
      {label && <Label htmlFor={id} label={label} />}
      <InputContainer>
        {prefix && <span className="prefix">{prefix}</span>}
        <InputStyled
          defaultValue={value}
          id={id}
          max={max}
          min={min}
          onBlur={onBlur}
          onChange={onChange}
          prefix={prefix}
          step={step}
          tabIndex={0}
        />
        <ButtonStyled className="top" onClick={(e) => increase(e)}>
          <Icon src={ArrowTop} />
        </ButtonStyled>
        <ButtonStyled className="bottom" onClick={(e) => decrease(e)}>
          <Icon src={ArrowDown} />
        </ButtonStyled>
      </InputContainer>
      {errorMessage && <LabelError>{errorMessage}</LabelError>}
    </Wrapper>
  );
};
export { InputNumber };

Я пробовал эти решения, но не работал: Как использовать пользовательский ввод с Formik в Реагировать? https://github.com/jaredpalmer/formik/issues/187

Вы когда-нибудь находили подобную ошибку?

Я много искал, но информации по этой проблеме не так много.

...