React Formik 获取表单状态的值答案

【问题标题】：React Formik get form state's valuesReact Formik 获取表单状态的值
【发布时间】：2020-12-28 15:53:49
【问题描述】：

我有一个包含两个字段名称和年龄的表单。我知道当用户填写这两个字段并点击提交按钮时，我可以获得这两个字段的值。

但我想要的是，我有一个按钮调用显示填充值。当您按下该按钮时，我想在表单中查看用户填写的值。例如，如果他填写姓名为“汤姆”，年龄为 85 岁。我想看看。但现在我得到的是空的初始值对象。

My Code

如何使用 Reactjs 实现这一点？

【问题讨论】：

我认为您的链接已损坏
提交后，您可以将值存储到某个状态，并且可以在任何您想要的地方使用，因此您的链接已损坏，我们无法找到确切的问题
一个将近 4k 的用户如何在链接中而不是在问题本身中发布代码？

标签： javascript reactjs formik

【解决方案1】：

您可以使用 Formik 提供的 Formiks 道具获取填充的字段。

formik 提供的 values 属性将为填充的字段提供值。最初它将是空对象。开始填写字段后，values 对象将相应更新。

了解更多Formik可以提供哪些Props？

访问：- https://formik.org/docs/api/formik#touched--field-string-boolean-

希望下面的代码 sn-p 对你有用。

<Formik
        initialValues={{}}
        validationSchema={() => Yup.object().shape({`enter your validation keys here`})}
        onSubmit={(values) => {
          console.log('values after submit', values);
        }}
      >
        {(formikProps) => {
          const { values, handleChange } = formikProps;
          return (
            <Form>
              <label>
                name
                <input name="name" onChange={handleChange} />
              </label>
              <label>
                age
                <input name="age" type="number" onChange={handleChange} />
              </label>
              <button
                type="button"
                onClick={() => {
                  console.log('show filled fields', values);
                }}
              >
                Show Filled Fields
              </button>
              <button type={'submit'}> Submit</button>
            </Form>
          );
        }}
      </Formik>

【讨论】：

恭喜您在这里获得第一个答案！我是否可以建议您添加一些有关您修复的内容或为什么正确的详细信息？它可以帮助用户了解正在发生的事情，而不仅仅是为用户提供答案。考虑这是您在 Stackoverflow 上所有答案的规则。