React中重新实现强制实施表单的流程步骤
前言
就像设计人员一样，在添加逻辑之前，您需要为不同的状态“模拟”或创建“模拟”。例如，这里只是表单的视觉部分的模拟。这个模拟由一个 prop 控制，其默认值为 ：status'empty'
- 识别组件的不同视觉状态
- 确定触发这些状态更改的因素
- 表示内存中的状态
useState - 删除任何非必要状态变量
- 连接事件处理程序以设置状态
步骤 1：识别组件的不同视觉状态
在计算机科学中，你可能听说过“状态机”处于几种“状态”之一。如果你与设计师合作，你可能已经看到了不同“视觉状态”的模型。React 站在设计和计算机科学的交叉点上，所以这两个想法都是灵感的来源。
首先，您需要可视化用户可能看到的 UI 的所有不同“状态”：
- 空：表单有一个禁用的“提交”按钮。
- 键入：表单具有启用的“提交”按钮。
- 提交：表单已完全禁用。显示微调器。
- 成功：显示“谢谢”消息，而不是表单。
- 错误：与键入状态相同，但带有额外的错误消息。
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-Native左右联动List的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
很多小伙伴反馈React ant 点击导航条闪烁,没有传递具体的参数给点击事件 , 导致在函数内部无法准确判断要展示哪个子菜单,可能导致页面状态的短暂变化,出现闪烁效果,下面给大家分享解决方法,感兴趣的的朋友跟随小编一起看看吧2024-04-04
这篇文章主要介绍了关于react useState更新异步问题，具有很好的参考价值，希望对大家有所帮助。以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。2022-08-08
React 和 Vue 都是当今最流行的前端框架,它们都实现了组件化开发模式,本文将从React和Vue的组件更新原理入手,剖析两者虚拟DOM difer算法的异同点,具有一定的参考价值,感兴趣的可以了解一下2024-02-02
forwardRef 中React父组件控制子组件的实现代码
forwardRef 用于拿到父组件传入的 ref 属性，这样在父组件便能通过 ref 控制子组件，这篇文章主要介绍了forwardRef - React父组件控制子组件的实现代码,需要的朋友可以参考下2024-01-01
create-react-app使用antd按需加载的样式无效问题的解决
这篇文章主要介绍了create-react-app使用antd按需加载的样式无效问题的解决，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-02-02
React避坑指南之useEffect 依赖引用类型问题分析
这篇文章主要介绍了React避坑指南之useEffect 依赖引用类型问题分析,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-03-03
react 页面加载完成后自动执行标签的点击事件的两种操作方法
这篇文章主要介绍了react 页面加载完成后自动执行标签的点击事件,本文给大家分享两种操作方法结合示例代码给大家讲解的非常详细，需要的朋友可以参考下2022-12-12
这篇文章主要为大家介绍了React Fiber构建源码解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-02-02
这篇文章主要为大家详细介绍了React实现轮播图效果，使用react-slick组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-07-07
最新评论