當Formik表單更改時更新另一個組件 [英] Update another component when Formik form changes

問題描述

有一個基本的Formik表單：

<Formik
      initialValues={{ email: '', color: 'red', firstName: '' }}
      onSubmit={(values, actions) => {
        setTimeout(() => {
          alert(JSON.stringify(values, null, 2));
          actions.setSubmitting(false);
        }, 1000);
      }}
      render={props => (
        <form onSubmit={props.handleSubmit}>
          <Field type="email" name="email" placeholder="Email" />
          <div>other inputs ... </div>
          <button type="submit">Submit</button>
        </form>
      )}
    />

當其中的任何輸入更改時(不是提交，而是更改)-我需要更新<Formik />之外的另一個組件。"Outside"組件應接收所有表單數據。

有什么方法可以做到這一點，而不需要為表單的每個單獨輸入添加單獨的更改處理程序嗎？或者解決方案是嘗試在<Formik />內部插入"外部"組件？

推薦答案

Formik提供可用于獲取外部值的values對象。

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

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

  const getFormData = values => {
    // access values here
  };
  return (
    <div>
      <h1>Formik take values outside</h1>
      <Formik
        initialValues={initialValues}
        ...
      >
        {props => {
          setformValues(props.values); // store values in state 'formValues'
          getFormData(props.values); // or use any function to get values like this
          return (
            <form onSubmit={props.handleSubmit}>
            ...

Codesandbox中的工作演示here

這篇關于當Formik表單更改時更新另一個組件的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持IT屋！