使用formik處理反應中的形式

Web表單對於網站和應用程序至關重要。儘管本機HTML表格提供了基本功能，但管理其狀態，驗證和提交可能會變得複雜。反應以其組件驅動的方法，簡化了形式的處理，但仍可以導致詳細的代碼。 formik是一個輕巧的庫，優雅地解決了這些挑戰，簡化了狀態管理，驗證和提交。

本文展示了用Formik構建React表格，展示了其處理狀態，驗證和提交的能力。我們將從基本的React組件開始，然後集成Formik。

建立受控的反應形式

反應組件依賴於狀態和道具。 HTML表單元素通過其value屬性維護內部狀態。這使它們無法控制的組件 - DOM管理國家。但是，受控組件（反應管理國家）提供了更好的控制權和單一的真理來源。

簡單的不受控制的HTML表格可能看起來像這樣：

<div class="formRow">
  <label for="email">電子郵件</label>
  <input type="email" id="email">
</div>
<div class="formRow">
  <label for="password">密碼</label>
  <input type="password" id="password">
</div>
<button type="submit">提交</button>

將其轉換為受控的反應組件：

函數htmlform（）{
  const [email，setemail] = react.usestate（“”）;
  const [password，setpassword] = react.usestate（“”）;

  返回 （
    

電子郵件 setemail（e.target.value）} />

密碼 setPassword（e.target.value）} />

提交

）； }

這種方法為形式值提供了一個真實的來源，從而更輕鬆地驗證和性能優化。

為什麼選擇Formik？

存在許多形式的管理庫（例如，React Hook形式，Redux表單）。 Formik通過：

1. 聲明方法：抽像簡化了狀態，驗證和提交。
2. Escape Hatch：在需要時提供控制，儘管其抽象。
3. 共同標準的狀態：將與形式相關的邏輯保持在組件中。
4. 適應性：允許根據需要使用盡可能多或少的formik。
5. 易用性：簡單有效。

讓我們將Formik集成到我們的形式組件中。

實施Formik

我們將創建一個基本的登錄表單，探索三種formik使用方法：

1. useFormik鉤
2. 與React上下文的Formik（<formik></formik> ）
3. withFormik高階組件

演示需要Formik和YUP軟件包。

方法1： useFormik鉤

我們當前的形式是非功能的。 useFormik鉤提供Formik函數和變量。記錄返回的值顯示其內容。

我們將使用useFormik與initialValues和一個onSubmit處理程序：

 //反應組件
函數baseformik（）{
  const formik = useformik（{{
    初始值：{電子郵件：“”，密碼：“”}，
    onsubmit（values）{
      //表格提交邏輯
    }
  }）;

  返回 （
    

{/ *形式元素 */}

）； }

綁定形式以形成元素：

 //反應組件
函數baseformik（）{
  const formik = useformik（{{
    初始值：{電子郵件：“”，密碼：“”}，
    onsubmit（values）{
      //表格提交邏輯
    }
  }）;

  返回 （
    

電子郵件

{/ * ...其他表單元素 */}

）； }

這將處理提交（ onSubmit={formik.handleSubmit} ）和輸入狀態（ value ，通過formik.getFieldProps onChange ）。我們避免手動狀態管理和活動處理。破壞getFieldProps和handleSubmit進一步提高了代碼清晰度。

這<formik></formik>組件提供了與內置組件這樣的進一步抽象<field></field>，，，，<form></form> ， 和<errormessage></errormessage>。這些組件利用渲染道具模式。

從'formik'導入{formik，field，form};

函數formikrenderprops（）{
  const initialValues = {email：“”，密碼：“”};

  const onSubmit =（values）=> {
    警報（json.stringify（values，null，2））;
  };

  返回 （
    <formik initialvalues="{initialValues}" onsubmit="{onSubmit}">
      {（）=>（
        <form>
          <field classname="email formField" name="email" type="email"></field>
          {/ * ...其他表單元素 */}
        </form>
      ）
    </formik>
  ）；
}

Formik處理狀態和提交；我們專注於形式結構。

與Formik的形式驗證

Formik在表單級別（使用validate或validationSchema ），現場級別或手動觸發器提供驗證。表單級驗證立即驗證整個表單。 validate用於自定義驗證，而validationSchema則使用YUP之類的庫。

使用validate的示例：

 const formik = useformik（{{
  // ...
  validate ：（）=> {
    const errors = {};
    if（！formik.values.email）{errors.email =“必需”; }
    // ...其他驗證
    返回錯誤；
  }，，
  // ...
}）;

示例與yup一起validationSchema ：

 const formik = useformik（{{
  // ...
  驗證chema：yup.object（）。 shape（{{
    電子郵件：yup.string（）。電子郵件（“無效電子郵件”）。必要（“必需”），
    // ...其他驗證
  }），
  // ...
}）;

現場級別和手動驗證也是可能的。

方法3： withFormik高階組件

withFormik是包裝您的表單組件的高階組件。

實際例子

讓我們說明顯示錯誤消息並生成用戶名。

顯示錯誤消息

Formik簡化了錯誤顯示。檢查errors對象並顯示消息：

<label htmlfor="email">
  電子郵件
  {formik.touched.email && formik.errors.email}
</label>

或使用<errormessage></errormessage>：

<errormessage name="email"></errormessage>

生成用戶名

Formik的setValues可用於從電子郵件中生成用戶名：

 onsubmit（values）{
  formik.setValues（{... values，用戶名：`@$ {values.email.split（“@”）[0]}`}）;
}

結論

Formik大大簡化了反應形式處理。本文涵蓋了基礎知識；探索Formik的文檔，以了解高級功能和用例。

以上是使用formik處理反應中的形式的詳細內容。更多資訊請關注PHP中文網其他相關文章！