React 中重新实现强制实施表单

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

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

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

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

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/11125.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

解决java.lang.IllegalArgumentException异常的正确方法

java.lang.IllegalArgumentException 是 Java 中的一个异常类&#xff0c;表示方法中传递的参数不合法。这个异常通常在方法被调用时抛出&#xff0c;表明方法的参数出现了问题。要正确解决这个异常&#xff0c;你可以按照以下步骤进行&#xff1a; 查看异常信息&#xff1a;首…

免费思维13招之七:空间型思维

免费思维13招之七:空间型思维 本篇给你带来的是空间型思维。 空间型思维,具体分为内部空间型思维和外部空间型思维。 什么叫内部空间型思维呢? 内部空间型就是充分利用现有空间或资源为社会提供免费服务,积累人气,增加流量,从而带动消费。 为什么你生意不好?为什么你…

iOS ------ MRC

一&#xff0c;MRC MRC&#xff1a;Manual reference Counting与ARC是两种不同的内存管理机制。ARC是自动引用计数&#xff0c;有编译器在编译时自动插入内存管理代码。而MRC是手动引用计数&#xff0c;开发者需要手动管理对象的引用计数。开发者需要手动调用retain&#xff0…

信息系统架构基本概念及发展_2.信息系统架构的定义

1.几种架构的定义 信息系统架构仍在不断发展中&#xff0c;还没有形成一个公认的定义&#xff0c;这里举出几个定义。 定义1&#xff1a;软件或计算机系统的信息系统架构是该系统的一个&#xff08;或多个&#xff09;结构&#xff0c;而结构由软件元素、元素的外部可见…

最全-全分辨率免ROOT免费脚本开发工具《懒人精灵》系统视频教程

---全分辨率免ROOT免费脚本开发工具《懒人精灵》--- 一、基础板块-视频教程 1.懒人精灵核心基础视频教程(一)&#xff1a;https://www.bilibili.com/video/BV1vr4y1P7hh/ 2.懒人精灵核心基础视频教程(二)&#xff1a;https://www.bilibili.com/video/BV1BB4y1X7rw/ 二、插件-…

ppt保存文件奇怪问题

我发现ppt中的形状保存成jpg,png和pdf时&#xff0c;格式不一样 比如 当右键单击时&#xff0c;然后选择另存为图片 png格式 jpg格式 pdf格式 感觉还是很奇怪&#xff0c;就pdf的格式比较靠谱一点

2024年建筑施工特种作业人员安全生产知识试题

100分题库提供安全员考试试题、建筑安全员考试预测题、建筑安全员ABC考试真题、安全员证考试题库等&#xff0c;提供在线做题刷题&#xff0c;在线模拟考试&#xff0c;助你考试轻松过关。 单选题&#xff08;1-10&#xff09; 1.因生产安全事故受损害的从业人员&#xff0c;除…

Busybox 在 Docker 中的部署和启动

可以使用 docker pull 指令下载 busybox:latest 镜像&#xff1a; PS C:\Users\yhu> docker pull busybox:latest latest: Pulling from library/busybox ec562eabd705: Pull complete Digest: sha256:5eef5ed34e1e1ff0a4ae850395cbf665c4de6b4b83a32a0bc7bcb998e24e7bbb St…

ElasticSearch集群环境

ElasticSearch集群环境 1、Linux单机 下载地址&#xff1a;LINUX X86_64 (elastic.co) 下载之后进行解压 tar -zxf elasticsearch-7.8.0-linux-x86_64.tar.gz 名字太长了改个名字改成es mv elasticsearch-7.8.0 es因为安全问题&#xff0c;Elasticsearch 不允许 root 用户…

性能优化 | el-table中内嵌大量el-input控件导致渲染卡顿的问题

场景 项目中有一个应用场景&#xff0c;用户需要在表单中大量使用选择框以及输入框填写数据&#xff08;每一行大概有三十几个输入框&#xff09;&#xff0c;当选择框与输入框达到一定数量的时候&#xff0c;页面会出现输入不连续、卡顿的现象&#xff0c;如下图&#xff1a;…

【信息系统项目管理师知识点速记】风险管理:规划风险管理

规划风险管理是确保项目风险得到有效管控的关键前期步骤,它为整个项目生命周期中识别、分析、应对和监控风险提供了蓝图。 核心目的 匹配度:确保风险管理策略与项目风险水平、组织及干系人重要性相匹配。适时调整:项目初期完成,但需在重大变动时重新评估和调整。输入要素 …

16.直方图均衡化

数字图像处理(17): 直方图均衡化处理 简介 直方图均衡化是一种简单有效的图像增强技术&#xff0c;通过改变图像的直方图来改变图像中各像素的灰度&#xff0c;主要用于增强动态范围偏小的图像的对比度。当原始图像的灰度分布较为集中的时候&#xff0c;可能造成图像不够清晰&…

如何高效率阅读文献

很多导师曾说&#xff0c;不应该花费超过30分钟阅读一篇论文&#xff0c;在某些特殊的时间段&#xff0c;30分钟甚至可能都算是太多的时间&#xff0c;比如&#xff1a;你正准备毕业论文或者想要发表论文的时候…… 文献阅读为何如此重要&#xff1f;又该如何有效快速的阅读&a…

C++基础与深度解析 | 什么是C++ | C++开发环境与相关工具 | C++编译/链接模型

文章目录 一、什么是C二、C的开发环境与相关工具三、C的编译/链接模型 一、什么是C C是一门比较流行的编程语言&#xff08;高级语言&#xff09;&#xff0c;同时也是一门复杂的语言。从TIOBE 编程社区指数中可以看出&#xff1a;在2024.04中&#xff0c;其编程语言受欢迎程度…

HCIP【BGP综合实验】

目录 一、实验拓扑图&#xff1a; 二、实验要求&#xff1a; 三、实验思路&#xff1a; 四、实验步骤&#xff1a; 1、进行网段的子网划分&#xff08;整个实验总共有19条网段&#xff09;&#xff1a; (1)首先&#xff0c;根据实验要求&#xff0c;将172.16.0.0/16全部划…

2024湖南理工学院程序设计竞赛(同步赛) G. 区间递减(思维题 分类讨论 ST表)

题目 https://ac.nowcoder.com/acm/contest/82672/G 思路来源 出题人 涼風青葉7代码 题解 注意到三种情况即可&#xff0c; 第一种情况&#xff0c;10 9 8 1 2&#xff0c;保留1 第二种情况&#xff0c;6 5 10 9 4 4&#xff0c;保留5 4 4 第三种情况&#xff0c;6 5 4&…

基于STM32单片机的二轮平衡小车

设计一个基于STM32单片机的二轮平衡小车是一个涉及硬件选择、软件编程、控制算法和机械设计的复杂项目。这里我可以给你一个大致的项目概述和一些基础的代码示例&#xff0c;但请注意&#xff0c;完整的项目设计和实现将需要更详细的规划和大量的调试工作。 1. 项目概述 二轮…

SpringBoot使用腾讯云实现短信功能

引入依赖 <!-- 腾讯云依赖 --> <dependency><groupId>com.tencentcloudapi</groupId><artifactId>tencentcloud-sdk-java</artifactId><version>3.1.270</version> </dependency>配置文件 # 腾讯云短信配置 sms:tence…

jdk8的新特征

1&#xff1a; jdk8中新增的方法 在jdk8中对接口进行了增强&#xff0c;在jdk8之前 interface 接口名{ 静态常量&#xff1a; 抽象方法&#xff1a; } 在jdk8之后 interface 接口名{ 静态常量&#xff1a; 抽象方法&#xff1a; 默认方法&#xff1a; 静态方法&#xff1a; } 2…

linux使用/etc/hosts.deny拒绝恶意ssh到本机

一、目标 在某些特殊情况下&#xff0c;服务器有很多恶意暴力ssh破解的攻击。解决的办法有很多&#xff0c;这里用/etc/hosts.deny增加黑名单的方式来简单阻止一下。 二、前言 /etc/hosts.allow 优先于 /etc/hosts.deny。 如果在allow和deny文件中都有某个ip&#xff0c;那…