Реагируйте Formik с пользовательским компонентом: поднятие состояния во время проверки - PullRequest
Новая
       10

Реагируйте Formik с пользовательским компонентом: поднятие состояния во время проверки

0 голосов
/ 11 июля 2019

Я пытаюсь использовать Formik в моей форме, которая успешно поднимает состояние на от пользовательского дочернего компонента Input до его родителя (после этого учебник с официального сайта React)

Следующая песочница показывает базовый пример того, что у меня пока есть: https://codesandbox.io/s/formik-with--or-without-custom-component-d8sof (да, есть некоторые styled-компоненты , которые используются с InputStyled, но это должно быть "прозрачный ") 

          <Input //switch to input to try other scenario
            type="number"
            name="surface"
            placeholder="please type surface"
            onValueChange={handleSurfaceChange}
            unit="sq feet"
            value={values.surface}
            onChange={handleChange}
          />

В приведенной выше выдержке показан пользовательский компонент с именем Ввод (обратите внимание на заглавное" I ")

С этим пользовательским компонентом Ввод: подъемное состояние работает, но поверхность - нетотслеживается Formik и проверка всегда завершается неудачей.

С вводом (строчные буквы - не вызывать мой пользовательский компонент): проверка с помощью Formik работает, но я не использую свой пользовательский компонент, поэтому я не участвую в отменесостояние ребенка вверх.=> Моя цель - заставить оба работать.

Поэтому я попытался использовать <Field component={Input} /> вместо моего <Input /> https://jaredpalmer.com/formik/docs/api/field

Но я не могу понять, как сделатьработа с кодом.

Я начал работать над другим примером CodeSanbox, следуя разным следам, но вещи запутываются.

https://codesandbox.io/s/formik-with--or-without-custom-component-ybbm7

В родительском: 

<Field
            component={Input} //my custom React Component
            type="number"
            name="surface"
            placeholder="please type surface"
            onValueChange={handleSurfaceChange}
            value={values.surface}
            //at a loss below
            //onChange={handleChange}
            // handleChange={e => {
            //   console.log("Entering handleChange in Field...");
            //   // call the built-in handleChange
            //   handleChange(e);
            //   // and do something about e
            //   let someValue = e.currentTarget.value;
            //   console.log("someValue = " + someValue);
            // }}
          />

В дочернем (это стильный компонент, ничего особенного, просто обычный ввод, «украшенный» CSS): 

<InputStyled
        {...field}
        {...props}
        id={props.name}
        name={props.name}
        type={props.type}
        //value={props.value}
        onChange={handleChange}
        // onChange={newValue => {
        //   setFieldValue(field.name, newValue);
        //   console.log("newValue = " + newValue);
        // }}
        placeholder={props.placeholder}
      />
      {touched[field.name] && errors[field.name] && (
        <div className="error">{errors[field.name]}</div>
      )}

Я не могу найти правильный способ справиться с onChange, обрабатывай события от Formik и от себя.снятие состояния и проверки Formik нарушены.

Может кто-нибудь указать мне правильное направление для правильного синтаксиса, пожалуйста?

...