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

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

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

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

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

首先,您需要可视化用户可能看到的 UI 的所有不同"状态":
7. :表单有一个禁用的"提交"按钮。
8. 键入:表单具有启用的"提交"按钮。
9. 提交:表单已完全禁用。显示微调器。
10. 成功:显示"谢谢"消息,而不是表单。
11. 错误:与键入状态相同,但带有额外的错误消息。

javascript 复制代码
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

javascript 复制代码
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,以及 (如果存在)来存储最后一个错误:answer``error

复制代码

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 的情况。 (例如,您永远不希望同时显示错误消息并禁用输入,否则用户将无法更正错误!

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

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

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

javascript 复制代码

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

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

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

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

javascript 复制代码
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);
  });
}

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

相关推荐
码事漫谈14 分钟前
解决 Anki 启动器下载错误的完整指南
前端
im_AMBER33 分钟前
Web 开发 27
前端·javascript·笔记·后端·学习·web
蓝胖子的多啦A梦1 小时前
低版本Chrome导致弹框无法滚动的解决方案
前端·css·html·chrome浏览器·版本不同造成问题·弹框页面无法滚动
玩代码1 小时前
vue项目安装chromedriver超时解决办法
前端·javascript·vue.js
訾博ZiBo1 小时前
React 状态管理中的循环更新陷阱与解决方案
前端
StarPrayers.2 小时前
旅行商问题(TSP)(2)(heuristics.py)(TSP 的两种贪心启发式算法实现)
前端·人工智能·python·算法·pycharm·启发式算法
一壶浊酒..2 小时前
ajax局部更新
前端·ajax·okhttp
DoraBigHead3 小时前
React 架构重生记:从递归地狱到时间切片
前端·javascript·react.js
彩旗工作室3 小时前
WordPress 本地开发环境完全指南:从零开始理解 Local by Flywhee
前端·wordpress·网站
iuuia4 小时前
02--CSS基础
前端·css