面试题：React 组件中受控表单与非受控表单的区别及应用场景

Question

在 React 组件处理表单时，阐述受控表单和非受控表单的概念、区别，并且分别举例说明它们适合在哪些场景下使用。

Answer 1

受控表单

• 概念：表单元素的值由 React 组件的 state 控制，用户输入触发 onChange 事件，更新 state，表单状态始终与 state 保持同步。
• 区别：值受 React 状态管理，数据流向清晰可预测，便于验证、控制输入等操作。
• 适用场景：需要实时验证输入、根据输入动态调整 UI 或进行复杂表单逻辑处理的场景，如登录表单验证用户名和密码格式。

示例代码：

import React, { useState } from 'react';

const ControlledForm = () => {
  const [inputValue, setInputValue] = useState('');

  const handleChange = (e) => {
    setInputValue(e.target.value);
  };

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

export default ControlledForm;

非受控表单

• 概念：表单元素的值由 DOM 自身管理，React 只在必要时访问表单的值，如提交表单时。使用 ref 来获取表单元素的值。
• 区别：表单状态脱离 React 状态管理，更接近传统 HTML 表单行为，适用于简单场景，减少 React 状态管理负担。
• 适用场景：简单表单，不需要实时验证和复杂交互，如文件上传表单。

示例代码：

import React, { useRef } from 'react';

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

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Input value:', inputRef.current.value);
  };

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

export default UncontrolledForm;