8、测试驱动的数据输入与复杂表单交互

测试驱动的数据输入与复杂表单交互

测试驱动的数据输入

在开发表单组件时，测试驱动开发（TDD）是一种非常有效的方法。下面将详细介绍如何通过测试驱动来实现一个包含文本框的 HTML 表单，并处理表单数据的输入和提交。

提交更改的值

首先，我们需要在组件中引入状态管理，以处理文本框的输入变化。在 React 中，我们可以使用 useState 钩子来实现这一点。

在处理 DOM 变化事件时，我们需要注意 React 的变化跟踪行为。为了绕过 React 的变化跟踪逻辑，我们可以使用一个辅助函数 originalValueProperty ：

const originalValueProperty = (reactElement) => {
  const prototype = Object.getPrototypeOf(reactElement);
  return Object.getOwnPropertyDescriptor(
    prototype,
    "value"
  );
};

为了模拟文本框的输入变化，我们可以创建一个 change 辅助函数：

export const change = (target, value) => {
  originalValueProperty(target).set.call(