快捷導(dǎo)航

React中重新實(shí)現(xiàn)強(qiáng)制實(shí)施表單的流程步驟

更新時(shí)間：2024年05月13日 10:29:03 作者：刻刻帝的海角

這篇文章主要介紹了React中重新實(shí)現(xiàn)強(qiáng)制實(shí)施表單的流程步驟,就像設(shè)計(jì)人員一樣,在添加邏輯之前,您需要為不同的狀態(tài)“模擬”或創(chuàng)建“模擬”,例如,這里只是表單的視覺(jué)部分的模擬,文中通過(guò)代碼示例講解的非常詳細(xì),需要的朋友可以參考下

前言

就像設(shè)計(jì)人員一樣，在添加邏輯之前，您需要為不同的狀態(tài)“模擬”或創(chuàng)建“模擬”。例如，這里只是表單的視覺(jué)部分的模擬。這個(gè)模擬由一個(gè) prop 控制，其默認(rèn)值為：status'empty'

識(shí)別組件的不同視覺(jué)狀態(tài)
確定觸發(fā)這些狀態(tài)更改的因素
表示內(nèi)存中的狀態(tài)useState
刪除任何非必要狀態(tài)變量
連接事件處理程序以設(shè)置狀態(tài)

步驟 1：識(shí)別組件的不同視覺(jué)狀態(tài)

在計(jì)算機(jī)科學(xué)中，你可能聽(tīng)說(shuō)過(guò)“狀態(tài)機(jī)”處于幾種“狀態(tài)”之一。如果你與設(shè)計(jì)師合作，你可能已經(jīng)看到了不同“視覺(jué)狀態(tài)”的模型。React 站在設(shè)計(jì)和計(jì)算機(jī)科學(xué)的交叉點(diǎn)上，所以這兩個(gè)想法都是靈感的來(lái)源。

首先，您需要可視化用戶可能看到的 UI 的所有不同“狀態(tài)”：

空：表單有一個(gè)禁用的“提交”按鈕。
鍵入：表單具有啟用的“提交”按鈕。
提交：表單已完全禁用。顯示微調(diào)器。
成功：顯示“謝謝”消息，而不是表單。
錯(cuò)誤：與鍵入狀態(tài)相同，但帶有額外的錯(cuò)誤消息。

export default function Form({
  status = 'empty'
}) {
  if (status === 'success') {
    return <h1>That's right!</h1>
  }
  return (
    <>
      <h2>City quiz</h2>
      <p>
        In which city is there a billboard that turns air into drinkable water?
      </p>
      <form>
        <textarea />
        <br />
        <button>
          Submit
        </button>
      </form>
    </>
  )
}

你可以隨心所欲地稱呼這個(gè)道具，命名并不重要。嘗試編輯以顯示成功消息。通過(guò)模擬，您可以在連接任何邏輯之前快速迭代 UI。這是同一組件的更充實(shí)的原型，仍然由道具“控制”：status = 'empty'status = 'success'status

export default function Form({
  // Try 'submitting', 'error', 'success':
  status = 'empty'
}) {
  if (status === 'success') {
    return <h1>That's right!</h1>
  }
  return (
    <>
      <h2>City quiz</h2>
      <p>
        In which city is there a billboard that turns air into drinkable water?
      </p>
      <form>
        <textarea disabled={
          status === 'submitting'
        } />
        <br />
        <button disabled={
          status === 'empty' ||
          status === 'submitting'
        }>
          Submit
        </button>
        {status === 'error' &&
          <p className="Error">
            Good guess but a wrong answer. Try again!
          </p>
        }
      </form>
      </>
  );
}

步驟 2：確定觸發(fā)這些狀態(tài)更改的原因

您可以觸發(fā)狀態(tài)更新以響應(yīng)兩種類型的輸入：

人工輸入，例如單擊按鈕、輸入字段、導(dǎo)航鏈接。
計(jì)算機(jī)輸入，如網(wǎng)絡(luò)響應(yīng)到達(dá)、超時(shí)完成、圖像加載。

步驟 3：用useState

接下來(lái)，您需要使用 useState 表示內(nèi)存中組件的視覺(jué)狀態(tài)。簡(jiǎn)單性是關(guān)鍵：每個(gè)狀態(tài)都是一個(gè)“移動(dòng)部分”，你希望盡可能少的“移動(dòng)部分”。更復(fù)雜會(huì)導(dǎo)致更多的錯(cuò)誤！

從絕對(duì)必須存在的狀態(tài)開(kāi)始。例如，您需要存儲(chǔ) for the input，以及（如果存在）來(lái)存儲(chǔ)最后一個(gè)錯(cuò)誤：answererror

const [answer, setAnswer] = useState('');

const [error, setError] = useState(null);

然后，需要一個(gè)狀態(tài)變量，表示要顯示的視覺(jué)狀態(tài)之一。在內(nèi)存中通常有不止一種表示方式，因此您需要對(duì)其進(jìn)行試驗(yàn)。

如果您很難立即想到最佳方法，請(qǐng)首先添加足夠的狀態(tài)，以便您確定涵蓋了所有可能的視覺(jué)狀態(tài)：

const [isEmpty, setIsEmpty] = useState(true);

const [isTyping, setIsTyping] = useState(false);

const [isSubmitting, setIsSubmitting] = useState(false);

const [isSuccess, setIsSuccess] = useState(false);

const [isError, setIsError] = useState(false);

你的第一個(gè)想法可能不是最好的，但沒(méi)關(guān)系——重構(gòu)狀態(tài)是這個(gè)過(guò)程的一部分！

步驟 4：刪除任何非必要狀態(tài)變量

您希望避免狀態(tài)內(nèi)容中的重復(fù)，因此您只跟蹤必要的內(nèi)容?；ㄒ稽c(diǎn)時(shí)間重構(gòu)狀態(tài)結(jié)構(gòu)將使組件更易于理解，減少重復(fù)，并避免意外含義。你的目標(biāo)是防止內(nèi)存中的狀態(tài)不表示你希望用戶看到的任何有效 UI 的情況。 （例如，您永遠(yuǎn)不希望同時(shí)顯示錯(cuò)誤消息并禁用輸入，否則用戶將無(wú)法更正錯(cuò)誤！

以下是您可以詢問(wèn)的有關(guān)狀態(tài)變量的一些問(wèn)題：

這種狀態(tài)會(huì)導(dǎo)致悖論嗎？例如，不能兩者都是 .悖論通常意味著狀態(tài)的約束不夠。兩個(gè)布爾值有四種可能的組合，但只有三種對(duì)應(yīng)于有效狀態(tài)。若要?jiǎng)h除“不可能”狀態(tài)，可以將它們組合成一個(gè)必須是以下三個(gè)值之一的值：、或。isTypingisSubmittingtruestatus'typing''submitting''success'
相同的信息是否已經(jīng)在另一個(gè)狀態(tài)變量中可用？另一個(gè)悖論：不能同時(shí)存在。通過(guò)使它們成為單獨(dú)的狀態(tài)變量，您可能會(huì)冒著它們不同步并導(dǎo)致錯(cuò)誤的風(fēng)險(xiǎn)。幸運(yùn)的是，您可以刪除并改為檢查 .isEmptyisTypingtrueisEmptyanswer.length === 0
你能從另一個(gè)狀態(tài)變量的逆變量中得到相同的信息嗎？ 不需要，因?yàn)槟梢愿臑闄z查。isErrorerror !== null

清理完畢后，剩下 3 個(gè)（低于 7 個(gè)！基本狀態(tài)變量：

const [answer, setAnswer] = useState('');
const [error, setError] = useState(null);
const [status, setStatus] = useState('typing'); // 'typing', 'submitting', or 'success'

您知道它們是必不可少的，因?yàn)槟鸁o(wú)法在不破壞功能的情況下刪除它們中的任何一個(gè)。

步驟 5：將事件處理程序連接到設(shè)置狀態(tài)

最后，創(chuàng)建更新?tīng)顟B(tài)的事件處理程序。下面是最終形式，所有事件處理程序都已連接起來(lái)：

import { useState } from 'react';
 
export default function Form() {
  const [answer, setAnswer] = useState('');
  const [error, setError] = useState(null);
  const [status, setStatus] = useState('typing');
 
  if (status === 'success') {
    return <h1>That's right!</h1>
  }
 
  async function handleSubmit(e) {
    e.preventDefault();
    setStatus('submitting');
    try {
      await submitForm(answer);
      setStatus('success');
    } catch (err) {
      setStatus('typing');
      setError(err);
    }
  }
 
  function handleTextareaChange(e) {
    setAnswer(e.target.value);
  }
 
  return (
    <>
      <h2>City quiz</h2>
      <p>
        In which city is there a billboard that turns air into drinkable water?
      </p>
      <form onSubmit={handleSubmit}>
        <textarea
          value={answer}
          onChange={handleTextareaChange}
          disabled={status === 'submitting'}
        />
        <br />
        <button disabled={
          answer.length === 0 ||
          status === 'submitting'
        }>
          Submit
        </button>
        {error !== null &&
          <p className="Error">
            {error.message}
          </p>
        }
      </form>
    </>
  );
}
 
function submitForm(answer) {
  // Pretend it's hitting the network.
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let shouldError = answer.toLowerCase() !== 'lima'
      if (shouldError) {
        reject(new Error('Good guess but a wrong answer. Try again!'));
      } else {
        resolve();
      }
    }, 1500);
  });
}

盡管此代碼比原始命令式示例更長(zhǎng)，但它的脆弱性要小得多。將所有交互表示為狀態(tài)更改，可以在以后引入新的視覺(jué)狀態(tài)，而不會(huì)破壞現(xiàn)有狀態(tài)。它還允許您更改每個(gè)狀態(tài)中應(yīng)顯示的內(nèi)容，而無(wú)需更改交互本身的邏輯。

以上就是React中重新實(shí)現(xiàn)強(qiáng)制實(shí)施表單的流程步驟的詳細(xì)內(nèi)容，更多關(guān)于React強(qiáng)制實(shí)施表單的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: