Отмена изменения текстового поля формы Formik

Question

Я использую следующий код:

        <Formik initialValues={{val:cell.value}}>
          <Form>
            <Field type="text" name="val" size="2" onChange = {(e)=> {console.log(e.target)}}></Field>
          </Form>
        </Formik>

Я не могу изменить значение в интерфейсе пользователя. Что я делаю не так?

Answer 1

Formik должен обрабатывать изменения. См. Следующий пример: https://jaredpalmer.com/formik/docs/api/formik

Обратите внимание, что вход в примере запускает handleChange Formik в onChange:

onChange={props.handleChange}

Answer 2

Приложение. js

Я использовал функциональный компонент и useState .

const App = () => {
  const cell = { value: "test" };
  const [myVal, setMyVal] = useState(cell.value);
  return (
    <div>
      <Formik initialValues={{ val: cell.value }}>
        <Form>
          <Field
            type="text"
            name="val"
            size="20"
            placeholder="type something"
            value={myVal}
            onChange={e => {
              console.log(e.target.value);
              setMyVal(e.target.value);
            }}
          />
        </Form>
      </Formik>
    </div>
  );
};

проверить демонстрационный код

Answer 3

В вашем onChange вам нужно обновить состояние, которое затем передается обратно в Formik. Прямо сейчас вы просто выводите значение.