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

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

相关推荐
一ge科研小菜鸡19 分钟前
React前端框架:现代网页开发的基石(附带构建简单任务管理应用案例代码)
前端框架
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
科技探秘人3 小时前
Chrome与火狐哪个浏览器的隐私追踪功能更好
前端·chrome
科技探秘人3 小时前
Chrome与傲游浏览器性能与功能的深度对比
前端·chrome
JerryXZR3 小时前
前端开发中ES6的技术细节二
前端·javascript·es6
七星静香3 小时前
laravel chunkById 分块查询 使用时的问题
java·前端·laravel
q2498596933 小时前
前端预览word、excel、ppt
前端·word·excel