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

 更新时间:2024年05月13日 10:29:03   作者:刻刻帝的海角  
这篇文章主要介绍了React中重新实现强制实施表单的流程步骤,就像设计人员一样,在添加逻辑之前,您需要为不同的状态“模拟”或创建“模拟”,例如,这里只是表单的视觉部分的模拟,文中通过代码示例讲解的非常详细,需要的朋友可以参考下

前言

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

  1. 识别组件的不同视觉状态
  2. 确定触发这些状态更改的因素
  3. 表示内存中的状态useState
  4. 删除任何非必要状态变量
  5. 连接事件处理程序以设置状态

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

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

首先,您需要可视化用户可能看到的 UI 的所有不同“状态”:

  1. :表单有一个禁用的“提交”按钮。
  2. 键入:表单具有启用的“提交”按钮。
  3. 提交:表单已完全禁用。显示微调器。
  4. 成功:显示“谢谢”消息,而不是表单。
  5. 错误:与键入状态相同,但带有额外的错误消息。
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>
    </>
  )
}

你可以随心所欲地称呼这个道具,命名并不重要。尝试编辑以显示成功消息。通过模拟,您可以在连接任何逻辑之前快速迭代 UI。这是同一组件的更充实的原型,仍然由道具“控制”: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:确定触发这些状态更改的原因

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

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

步骤 3:用useState 

接下来,您需要使用 useState 表示内存中组件的视觉状态。简单性是关键:每个状态都是一个“移动部分”,你希望尽可能少的“移动部分”。更复杂会导致更多的错误!

从绝对必须存在的状态开始。例如,您需要存储 for the input,以及 (如果存在)来存储最后一个错误:answererror

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

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

然后,需要一个状态变量,表示要显示的视觉状态之一。在内存中通常有不止一种表示方式,因此您需要对其进行试验。

如果您很难立即想到最佳方法,请首先添加足够的状态,以便您确定涵盖了所有可能的视觉状态:

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);

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

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

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

以下是您可以询问的有关状态变量的一些问题:

  • 这种状态会导致悖论吗?例如,不能两者都是 .悖论通常意味着状态的约束不够。两个布尔值有四种可能的组合,但只有三种对应于有效状态。若要删除“不可能”状态,可以将它们组合成一个必须是以下三个值之一的值:、 或 。isTypingisSubmittingtruestatus'typing''submitting''success'
  • 相同的信息是否已经在另一个状态变量中可用?另一个悖论:不能同时存在。通过使它们成为单独的状态变量,您可能会冒着它们不同步并导致错误的风险。幸运的是,您可以删除并改为检查 .isEmptyisTypingtrueisEmptyanswer.length === 0
  • 你能从另一个状态变量的逆变量中得到相同的信息吗? 不需要,因为您可以改为检查。isErrorerror !== null

清理完毕后,剩下 3 个(低于 7 个!基本状态变量:

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

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

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

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

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);
  });
}

尽管此代码比原始命令式示例更长,但它的脆弱性要小得多。将所有交互表示为状态更改,可以在以后引入新的视觉状态,而不会破坏现有状态。它还允许您更改每个状态中应显示的内容,而无需更改交互本身的逻辑。

以上就是React中重新实现强制实施表单的流程步骤的详细内容,更多关于React强制实施表单的资料请关注脚本之家其它相关文章!

相关文章

  • React Router中Link和NavLink的学习心得总结

    React Router中Link和NavLink的学习心得总结

    这篇文章主要介绍了React Router中Link和NavLink的学习心得总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • react表单受控的实现方案

    react表单受控的实现方案

    数据的受控控制一直是react里的一个痛点,当我想要实现一个输入框的受控控制时,我需要定义一个onChange和value,手动去实现数据的绑定,本文小编给大家介绍了react表单受控的实现方案,需要的朋友可以参考下
    2023-12-12
  • React手写redux过程分步讲解

    React手写redux过程分步讲解

    这篇文章主要介绍了React手写redux过程,目前redux在react中使用是最多的,所以我们需要将之前编写的redux代码,融入到react当中去,本文给大家详细讲解,需要的朋友可以参考下
    2022-12-12
  • react navigation中点击底部tab怎么传递参数

    react navigation中点击底部tab怎么传递参数

    本文主要介绍了react navigation中点击底部tab怎么传递参数,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-04-04
  • React-router v6在Class组件和非组件代码中的正确使用

    React-router v6在Class组件和非组件代码中的正确使用

    这篇文章主要介绍了React-router v6在Class组件和非组件代码中的正确使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-03-03
  • React18+TS通用后台管理系统解决方案落地实战示例

    React18+TS通用后台管理系统解决方案落地实战示例

    这篇文章主要为大家介绍了React18+TS通用后台管理系统解决方案落地实战示例详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • React组件的生命周期深入理解分析

    React组件的生命周期深入理解分析

    组件的生命周期就是React的工作过程,就好比人有生老病死,自然界有日月更替,每个组件在网页中也会有被创建、更新和删除,如同有生命的机体一样
    2022-12-12
  • react-player实现视频播放与自定义进度条效果

    react-player实现视频播放与自定义进度条效果

    本篇文章通过完整的代码给大家介绍了react-player实现视频播放与自定义进度条效果,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2022-01-01
  • react 路由Link配置详解

    react 路由Link配置详解

    本文主要介绍了react 路由Link配置详解,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-11-11
  • 详解React Native中如何使用自定义的引用路径

    详解React Native中如何使用自定义的引用路径

    这篇文章主要为大家介绍了React Native中如何使用自定义的引用路径详解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-10-10

最新评论