本文介绍了当Formik表单更改时更新另一个组件的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

有一个基本的Formik表单：

 {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          actions.setsubmitting(false);
        }, 1000);
      }}
      render={props => (
        

          
          
other inputs ... 
          Submit
        
      )}
    />

当其中的任何输入更改时(不是提交，而是更改)-我需要更新之外的另一个组件。"Outside"组件应接收所有表单数据。

有什么方法可以做到这一点，而不需要为表单的每个单独输入添加单独的更改处理程序吗？或者解决方案是尝试在内部插入"外部"组件？

推荐答案

Formik提供可用于获取外部值的values对象。

const App = () => {
  const initialValues = { email: '', color: 'red', firstName: '' }

  const [formValues, setformValues] = useState(initialValues);

  const getFormData = values => {
    // access values here
  };
  return (
    

      
Formik take values outside
      
        {props => {
          setformValues(props.values); // store values in state 'formValues'
          getFormData(props.values); // or use any function to get values like this
          return (
            

            ...

Codesandbox中的工作演示here

这篇关于当Formik表单更改时更新另一个组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持吉威生活！

[英文标题]Update another component when Formik form changes

声明：本媒体部分图片、文章来源于网络，版权归原作者所有，如有侵权，请联系QQ:330946442删除。