React中重新实现强制实施表单的流程步骤

宋秋梅

前言

就像设计人员一样，在添加逻辑之前，您需要为不同的状态“模拟”或创建“模拟”。例如，这里只是表单的视觉部分的模拟。这个模拟由一个 prop 控制，其默认值为 ：

1. status

复制代码

1. 'empty'

复制代码

• 识别组件的不同视觉状态
  
• 确定触发这些状态更改的因素
  
• 表示内存中的状态
  1. useState

  复制代码
• 删除任何非必要状态变量
  
• 连接事件处理程序以设置状态
  

步骤 1：识别组件的不同视觉状态

在计算机科学中，你可能听说过“状态机”处于几种“状态”之一。如果你与设计师合作，你可能已经看到了不同“视觉状态”的模型。React 站在设计和计算机科学的交叉点上，所以这两个想法都是灵感的来源。
首先，您需要可视化用户可能看到的 UI 的所有不同“状态”：

• 空：表单有一个禁用的“提交”按钮。
  
• 键入：表单具有启用的“提交”按钮。
  
• 提交：表单已完全禁用。显示微调器。
  
• 成功：显示“谢谢”消息，而不是表单。
  
• 错误：与键入状态相同，但带有额外的错误消息。
  

1. export default function Form({
   
2.   status = 'empty'
   
3. }) {
   
4.   if (status === 'success') {
   
5.     return <h1>That's right!</h1>
   
6.   }
   
7.   return (
   
8.     <>
   
9.       <h2>City quiz</h2>
   
10.       <p>
    
11.         In which city is there a billboard that turns air into drinkable water?
    
12.       </p>
    
13.       <form>
    
14.         <textarea />
    
15.         <br />
    
16.         <button>
    
17.           Submit
    
18.         </button>
    
19.       </form>
    
20.     </>
    
21.   )
    
22. }

复制代码

你可以随心所欲地称呼这个道具，命名并不重要。尝试编辑以显示成功消息。通过模拟，您可以在连接任何逻辑之前快速迭代 UI。这是同一组件的更充实的原型，仍然由道具“控制”：

1. status = 'empty'

复制代码

1. status = 'success'

复制代码

1. status

复制代码

1. export default function Form({
   
2.   // Try 'submitting', 'error', 'success':
   
3.   status = 'empty'
   
4. }) {
   
5.   if (status === 'success') {
   
6.     return <h1>That's right!</h1>
   
7.   }
   
8.   return (
   
9.     <>
   
10.       <h2>City quiz</h2>
    
11.       <p>
    
12.         In which city is there a billboard that turns air into drinkable water?
    
13.       </p>
    
14.       <form>
    
15.         <textarea disabled={
    
16.           status === 'submitting'
    
17.         } />
    
18.         <br />
    
19.         <button disabled={
    
20.           status === 'empty' ||
    
21.           status === 'submitting'
    
22.         }>
    
23.           Submit
    
24.         </button>
    
25.         {status === 'error' &&
    
26.           <p className="Error">
    
27.             Good guess but a wrong answer. Try again!
    
28.           </p>
    
29.         }
    
30.       </form>
    
31.       </>
    
32.   );
    
33. }

复制代码

步骤 2：确定触发这些状态更改的原因

您可以触发状态更新以响应两种类型的输入：

• 人工输入，例如单击按钮、输入字段、导航链接。
  
• 计算机输入，如网络响应到达、超时完成、图像加载。
  

步骤 3：用useState

接下来，您需要使用 useState 表示内存中组件的视觉状态。简单性是关键：每个状态都是一个“移动部分”，你希望尽可能少的“移动部分”。更复杂会导致更多的错误！
从绝对必须存在的状态开始。例如，您需要存储 for the input，以及 （如果存在）来存储最后一个错误：

1. answer

复制代码

1. error

复制代码

1. const [answer, setAnswer] = useState('');
   
2. 
   
3. const [error, setError] = useState(null);

复制代码

然后，需要一个状态变量，表示要显示的视觉状态之一。在内存中通常有不止一种表示方式，因此您需要对其进行试验。
如果您很难立即想到最佳方法，请首先添加足够的状态，以便您确定涵盖了所有可能的视觉状态：

1. const [isEmpty, setIsEmpty] = useState(true);
   
2. 
   
3. const [isTyping, setIsTyping] = useState(false);
   
4. 
   
5. const [isSubmitting, setIsSubmitting] = useState(false);
   
6. 
   
7. const [isSuccess, setIsSuccess] = useState(false);
   
8. 
   
9. const [isError, setIsError] = useState(false);

复制代码

你的第一个想法可能不是最好的，但没关系——重构状态是这个过程的一部分！

步骤 4：删除任何非必要状态变量

您希望避免状态内容中的重复，因此您只跟踪必要的内容。花一点时间重构状态结构将使组件更易于理解，减少重复，并避免意外含义。你的目标是防止内存中的状态不表示你希望用户看到的任何有效 UI 的情况。 （例如，您永远不希望同时显示错误消息并禁用输入，否则用户将无法更正错误！
以下是您可以询问的有关状态变量的一些问题：

• 这种状态会导致悖论吗？例如，不能两者都是 .悖论通常意味着状态的约束不够。两个布尔值有四种可能的组合，但只有三种对应于有效状态。若要删除“不可能”状态，可以将它们组合成一个必须是以下三个值之一的值：、 或 。
  1. isTyping

  复制代码
  1. isSubmitting

  复制代码
  1. true

  复制代码
  1. status

  复制代码
  1. 'typing'

  复制代码
  1. 'submitting'

  复制代码
  1. 'success'

  复制代码
• 相同的信息是否已经在另一个状态变量中可用？另一个悖论：不能同时存在。通过使它们成为单独的状态变量，您可能会冒着它们不同步并导致错误的风险。幸运的是，您可以删除并改为检查 .
  1. isEmpty

  复制代码
  1. isTyping

  复制代码
  1. true

  复制代码
  1. isEmpty

  复制代码
  1. answer.length === 0

  复制代码
• 你能从另一个状态变量的逆变量中得到相同的信息吗？ 不需要，因为您可以改为检查。
  1. isError

  复制代码
  1. error !== null

  复制代码

清理完毕后，剩下 3 个（低于 7 个！基本状态变量：

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

复制代码

您知道它们是必不可少的，因为您无法在不破坏功能的情况下删除它们中的任何一个。

步骤 5：将事件处理程序连接到设置状态

最后，创建更新状态的事件处理程序。下面是最终形式，所有事件处理程序都已连接起来：

1. import { useState } from 'react';
   
2. 
   
3. export default function Form() {
   
4.   const [answer, setAnswer] = useState('');
   
5.   const [error, setError] = useState(null);
   
6.   const [status, setStatus] = useState('typing');
   
7. 
   
8.   if (status === 'success') {
   
9.     return <h1>That's right!</h1>
   
10.   }
    
11. 
    
12.   async function handleSubmit(e) {
    
13.     e.preventDefault();
    
14.     setStatus('submitting');
    
15.     try {
    
16.       await submitForm(answer);
    
17.       setStatus('success');
    
18.     } catch (err) {
    
19.       setStatus('typing');
    
20.       setError(err);
    
21.     }
    
22.   }
    
23. 
    
24.   function handleTextareaChange(e) {
    
25.     setAnswer(e.target.value);
    
26.   }
    
27. 
    
28.   return (
    
29.     <>
    
30.       <h2>City quiz</h2>
    
31.       <p>
    
32.         In which city is there a billboard that turns air into drinkable water?
    
33.       </p>
    
34.       <form onSubmit={handleSubmit}>
    
35.         <textarea
    
36.           value={answer}
    
37.           onChange={handleTextareaChange}
    
38.           disabled={status === 'submitting'}
    
39.         />
    
40.         <br />
    
41.         <button disabled={
    
42.           answer.length === 0 ||
    
43.           status === 'submitting'
    
44.         }>
    
45.           Submit
    
46.         </button>
    
47.         {error !== null &&
    
48.           <p className="Error">
    
49.             {error.message}
    
50.           </p>
    
51.         }
    
52.       </form>
    
53.     </>
    
54.   );
    
55. }
    
56. 
    
57. function submitForm(answer) {
    
58.   // Pretend it's hitting the network.
    
59.   return new Promise((resolve, reject) => {
    
60.     setTimeout(() => {
    
61.       let shouldError = answer.toLowerCase() !== 'lima'
    
62.       if (shouldError) {
    
63.         reject(new Error('Good guess but a wrong answer. Try again!'));
    
64.       } else {
    
65.         resolve();
    
66.       }
    
67.     }, 1500);
    
68.   });
    
69. }

复制代码

尽管此代码比原始命令式示例更长，但它的脆弱性要小得多。将所有交互表示为状态更改，可以在以后引入新的视觉状态，而不会破坏现有状态。它还允许您更改每个状态中应显示的内容，而无需更改交互本身的逻辑。
以上就是React中重新实现强制实施表单的流程步骤的详细内容，更多关于React强制实施表单的资料请关注脚本之家其它相关文章！

来源:https://www.jb51.net/javascript/321031rsh.htm
免责声明：由于采集信息均来自互联网，如果侵犯了您的权益，请联系我们【E-Mail:cb@itdo.tech】 我们会及时删除侵权内容，谢谢合作！