React：受控组件与非受控组件，揭开表单元素的神秘面纱

React中表单元素的处理方式与HTML中有所不同。HTML表单元素会维护自身状态并根据用户输入进行更新。而在React中，可变状态通常存储在组件的state属性中，只能通过setState()方法更新。

为了在React中处理表单输入，有两种方法：使用受控组件或非受控组件。

受控组件

在受控组件中，组件的状态管理着表单元素的值。当用户输入时，组件会通过调用setState()方法更新状态，进而更新表单元素的值。

使用受控组件的好处是，组件始终控制表单元素的值。这使得表单验证、错误处理和表单状态管理变得更加容易。

非受控组件

在非受控组件中，表单元素的值不受组件状态的控制。相反，表单元素自身维护其值。组件只能通过引用表单元素并从其value属性中获取值来访问表单值。

使用非受控组件的好处是，实现起来更简单，因为它不需要组件管理表单状态。但是，这使得表单验证和错误处理变得更加困难。

选择哪种方法

选择使用受控还是非受控组件取决于具体情况。对于简单的表单，非受控组件可能就足够了。但是，对于复杂的表单或需要严格控制表单状态的情况，受控组件是更好的选择。

以下是使用受控组件和非受控组件的示例：

受控组件：

import React, { useState } from "react";

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

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

  return (
    <input type="text" value={value} onChange={handleChange} />
  );
};

非受控组件：

import React, { useRef } from "react";

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

  const handleSubmit = (event) => {
    event.preventDefault();
    const value = inputRef.current.value;
    // 使用表单值执行某些操作
  };

  return (
    <form onSubmit={handleSubmit}>
      <input type="text" ref={inputRef} />
      <button type="submit">提交</button>
    </form>
  );
};