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

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

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

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

簡(jiǎ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（“”）;

  返回 （
    

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

為什麼選擇Formik？

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

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

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

實(shí)施Formik

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

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

演示需要Formik和YUP軟件包。

方法1： useFormik鉤

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

我們將使用useFormik與initialValues和一個(gè)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 ）。我們避免手動(dòng)狀態(tài)管理和活動(dòng)處理。破壞getFieldProps和handleSubmit進(jìn)一步提高了代碼清晰度。

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

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

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

  const onSubmit =（values）=> {
    警報(bào)（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的形式驗(yàn)證

Formik在表單級(jí)別（使用validate或validationSchema ），現(xiàn)場(chǎng)級(jí)別或手動(dòng)觸發(fā)器提供驗(yàn)證。表單級(jí)驗(yàn)證立即驗(yàn)證整個(gè)表單。 validate用於自定義驗(yàn)證，而validationSchema則使用YUP之類的庫(kù)。

使用validate的示例：

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

示例與yup一起validationSchema ：

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

現(xiàn)場(chǎng)級(jí)別和手動(dòng)驗(yàn)證也是可能的。

方法3： withFormik高階組件

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

實(shí)際例子

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

顯示錯(cuò)誤消息

Formik簡(jiǎn)化了錯(cuò)誤顯示。檢查errors對(duì)象並顯示消息：

<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大大簡(jiǎn)化了反應(yīng)形式處理。本文涵蓋了基礎(chǔ)知識(shí)；探索Formik的文檔，以了解高級(jí)功能和用例。

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