Formik：获取特定组件的值答案

【问题标题】：Formik: getting values of specific componentsFormik：获取特定组件的值
【发布时间】：2021-08-25 10:11:17
【问题描述】：

我在我的 Reactjs 应用程序中使用 Formik 和 Yup 来获取注册信息。

但是我遇到了 MultiSelect 或 CountryDropdown 等特定组件的问题，因为 Formik 值不处理它们的 onChange，因此它们没有得到其中的任何值。该怎么做？

代码示例：

<Field
      fullWidth
      name="specialities"
      component={Multiselect}
      label="Specialities"
      isObject={false}
      options={specialities}
      placeholder="Select your specialities"
/>

非常感谢您的帮助

【问题讨论】：

根据文档“自定义 React 组件将被传递 onChange、onBlur、名称和值以及任何其他直接传递给的道具”，这意味着您可以将 Multiselect 包装在您自己的组件中接收onChange 并在多选值可用时调用它。

标签： reactjs formik

【解决方案1】：

您可以从回调参数访问所有字段值：

<Formik>
        {(props) => {
          const { values } = props; // <--- All your values are here!
          return (
            <Field
              fullWidth
              name="specialities"
              component={Multiselect}
              label="Specialities"
              isObject={false}
              options={specialities}
              placeholder="Select your specialities"
            />
          );
        }}
</Formik>

【讨论】：