受控组件和非受控组件：React表单组件指南

前端

2023-10-04 18:58:15

受控组件与非受控组件：React表单组件指南

什么是表单组件？

表单组件是交互式元素，允许用户输入和提交数据，例如文本输入、复选框和下拉菜单。在React中，表单组件可以分为两类：受控组件和非受控组件。

受控组件

受控组件是React状态中管理其值和行为的组件。这意味着组件完全控制表单字段，当用户输入时，状态会更新，从而更新组件。

受控组件的优势：

表单验证和数据处理轻松： 由于组件管理数据，您可以轻松验证输入并处理数据，以确保准确性和一致性。
双向数据绑定： 组件状态和表单字段值保持同步，简化了交互和用户体验。

非受控组件

非受控组件通过DOM元素本身存储和管理数据。这意味着组件使用引用从DOM中获取值，而不是管理自己的状态。

非受控组件的优势：

更少的代码： 由于组件不管理状态，因此非受控组件需要的代码更少，这使得它们更易于实现。
原始数据状态： 组件不会修改或验证输入，因此数据保留其原始状态。

选择哪种组件？

在选择受控或非受控组件时，考虑以下因素：

数据处理需求： 对于需要表单验证或数据处理的表单，受控组件是更好的选择。
代码复杂性： 如果表单字段较少，受控组件可能更简单；对于大量的字段，非受控组件可以减少代码量。
数据原始性： 如果需要保持表单数据的原始状态，则非受控组件更为合适。

总体建议：

在大多数情况下，受控组件是首选，因为它提供了更好的控制、验证和用户体验。但是，在需要保持数据原始性时，非受控组件可能是更好的选择。

代码示例

受控组件：

import React, { useState } from "react";

const MyInput = () => {
  const [value, setValue] = useState("");

  const handleChange = (event) => {
    setValue(event.target.value);
  };

  return <input value={value} onChange={handleChange} />;
};

非受控组件：

import React, { useRef } from "react";

const MyInput = () => {
  const inputRef = useRef();

  const handleClick = () => {
    console.log(inputRef.current.value);
  };

  return (
    <>
      <input ref={inputRef} />
      <button onClick={handleClick}>Get Value</button>
    </>
  );
};