从Formik字段的输入中获取值

时间:2020-09-23 07:33:18

标签: javascript html reactjs formik yup

有一个用于验证某些数据的Formik字段,看起来像这样:

<Formik
    initialValues={initialValues}
    validationSchema={validationSchema}
    onSubmit={values => this.handleDelete(values)}>
    {({ values, errors, touched, setFieldValue }) => (
      <Form>
        <Field
          className="add-input"
          name="deleteText"
          as={Input}
          placeholder="Write DELETE"
        />
      </Form>
    )}
 </Formik>

如果我在Inspect模式下使用DevTools在输入中输入文本“ abc”,则如下所示:

<form action ="#">
  <div class="ui input add-input">
     <input name="deleteText" placeholder="Write DELETE" type="text" value="abc">
  </div>
</form>

在这里可以看到引入的文本,但是如何从代码中访问该文本呢?

1 个答案:

答案 0 :(得分:0)

  1. 您可以将values[<name>]values['deleteText']一样用于代码(在Formik的渲染功能内部)

  1. 您可以将onChange道具传递给<Field>