Блог

Я пытаюсь передать свой собственный функциональный компонент в качестве атрибута компонента в поле Formik в React. Проблема в том, что я не знаю, как связать значение поля Formik со значением в моем пользовательском компоненте. Вот что я попробовал:

Form.js

 // other Formik Form code...
<Field
    className="form-control"
    name="NetWeight"
    component={IntegerComponent}
></Field>
//...
 

IntegerComponent.js

 function IntegerComponent({ field, className }) {
    const onChangeHandler = event => {
      const returnVal = (event.target.validity.valid) ? event.target.value : inputValue;
      setInputValue(returnVal);
    };

    return <input
      type="text"
      pattern="[0-9]*"
      className={className}
      onChange={onChangeHandler}
      value={inputValue}
    />
}
 

Я хочу привязать Formik field.value , которые я разрушаю из реквизитов, к входному значению моего NumberComponent. Я пытался это сделать field.value = returnVal , но это тоже не сработало. Я знаю, что могу использовать обработчики onBlur и onChange для вышеуказанных целей, а не для создания своего функционального компонента, но способ построения моего проекта, если я смогу заставить это работать, поможет сократить количество избыточного кода. Есть мысли или предложения?