Web表單對于網(wǎng)站和應(yīng)用程序至關(guān)重要。盡管本機HTML表格提供了基本功能，但管理其狀態(tài)，驗證和提交可能會變得復(fù)雜。反應(yīng)以其組件驅(qū)動的方法，簡化了形式的處理，但仍可以導(dǎo)致詳細(xì)的代碼。 formik是一個輕巧的庫，優(yōu)雅地解決了這些挑戰(zhàn)，簡化了狀態(tài)管理，驗證和提交。

本文展示了用Formik構(gòu)建React表格，展示了其處理狀態(tài)，驗證和提交的能力。我們將從基本的React組件開始，然后集成Formik。

建立受控的反應(yīng)形式

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

簡單的不受控制的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>

將其轉(zhuǎn)換為受控的反應(yīng)組件：

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

  返回 （
    

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

為什么選擇Formik？

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

1. 聲明方法：抽象簡化了狀態(tài)，驗證和提交。
2. Escape Hatch：在需要時提供控制，盡管其抽象。
3. 共同標(biāo)準(zhǔn)的狀態(tài)：將與形式相關(guān)的邏輯保持在組件中。
4. 適應(yīng)性：允許根據(jù)需要使用盡可能多或少的formik。
5. 易用性：簡單有效。

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

實施Formik

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

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

演示需要Formik和YUP軟件包。

方法1： useFormik鉤

我們當(dāng)前的形式是非功能的。 useFormik鉤提供Formik函數(shù)和變量。記錄返回的值顯示其內(nèi)容。

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

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

  返回 （
    

綁定形式以形成元素：

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

  返回 （
    

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

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

從'formik'導(dǎo)入{formik，field，form};

函數(shù)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處理狀態(tài)和提交；我們專注于形式結(jié)構(gòu)。

與Formik的形式驗證

Formik在表單級別（使用validate或validationSchema ），現(xiàn)場級別或手動觸發(fā)器提供驗證。表單級驗證立即驗證整個表單。 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（）。電子郵件（“無效電子郵件”）。必要（“必需”），
    // ...其他驗證
  }），
  // ...
}）;

現(xiàn)場級別和手動驗證也是可能的。

方法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]}`}）;
}

結(jié)論

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

以上是使用formik處理反應(yīng)中的形式的詳細(xì)內(nèi)容。更多信息請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！