在ReactJS中构建不受控制的组件（附代码示例）

我们已经了解了纯组件、功能组件、类组件，以及更多。这一次，我们将深入探讨不受控组件的反应，以及如何通过实例实现它们。

不受控制的组件

大多数情况下，当我们制作自定义组件时，我们倾向于制作受控组件，因为有了受控组件，你可以在反应组件中处理数据。另一方面，不受控制的组件是由DOM本身直接操作和处理的。

这对我们有什么帮助？

当你想到这一点时，受控组件和非受控组件都有其优点和缺点。然而，对于非控制组件，你可以执行反应和非反应代码，因为它将真理的来源保持在DOM内。

例子

function CustomComponent() {
  const emailRef = useRef(null);
  const phoneNumberRef = useRef(null);
  const firstNameRef = useRef(null);
  const lastNameRef = useRef(null);
  const referralRef = useRef(null);
  const passwordRef = useRef(null);

  const onSubmit = (event) => {
    alert(
      `Current values of the form ${emailRef.current.value}, ${phoneNumberRef.current.value}, ${firstNameRef.current.value}, ${lastNameRef.current.value}, ${referralRef.current.value}, ${passwordRef.current.value}`
    );
    event.preventDefault();
  };

  return (
    <form onSubmit={onSubmit}>
      {/* register our input field with register function provided by the useForm hook */}
      <input placeholder="Enter email" ref={emailRef} />
      <input placeholder="Enter phone number" ref={phoneNumberRef} />
      <input placeholder="Enter first name" ref={firstNameRef} />
      <input placeholder="Enter last name" ref={lastNameRef} />
      <input placeholder="Enter referral" ref={referralRef} />
      <input
        placeholder="Enter your password"
        type={"password"}
        ref={passwordRef}
      />

      <input type="submit" />
    </form>
  );
}

这里是我们的非控制组件使用useRef钩子处理我们的表单。有人可能会说，不受控制的组件看起来更薄更整洁，但在你下定决心之前，请看下面的表格

特征	不受控制的	受控
一次性取值（例如：提交时）
提交时验证
即时字段验证
有条件地禁用提交按钮
强制执行输入格式
一个数据的多个输入
动态输入

虽然，有些时候，不受控制的组件是唯一的选择，如

<input type="file" />

文件输入要由用户自己设置，不能以编程方式完成。或者说，如果你想访问一个音频播放器，你需要进入元素本身来做像PLAY和PAUSE这样的动作。

不受控制的表单组件在运行

总结

我们在这一章中总结了不受控制的组件，在技术上也是受控制的组件。我希望你对如何实现这两种组件有一个概念，并且知道什么时候应该使用哪一种。我希望能在下一章看到你，这并不是一个告别。保重。