面试题：React表单中如何实现受控组件与非受控组件的事件处理差异

Question

请详细阐述在React表单中，受控组件和非受控组件处理表单事件（如输入、提交等）的主要差异，每种情况各举一个代码示例，并说明在实际项目中如何选择使用受控组件还是非受控组件。

Answer 1

受控组件和非受控组件处理表单事件的差异

1. 受控组件：
   • 表单数据由 React 组件的 state 控制，输入值会实时更新 state。
   • 所有表单操作（如输入）都通过 onChange 事件处理函数更新 state。
   • 提交表单时，通常在 onSubmit 事件处理函数中处理表单数据。
2. 非受控组件：
   • 表单数据由 DOM 自身管理，React 只在特定时刻获取表单的值。
   • 输入时无需实时更新 state，一般通过 ref 获取表单的值。
   • 提交表单时，同样可在 onSubmit 事件处理函数中处理表单数据，但获取数据方式不同。

代码示例

受控组件示例

import React, { useState } from'react';

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

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

    const handleSubmit = (e) => {
        e.preventDefault();
        console.log('Submitted value:', inputValue);
    };

    return (
        <form onSubmit={handleSubmit}>
            <input
                type="text"
                value={inputValue}
                onChange={handleChange}
            />
            <button type="submit">Submit</button>
        </form>
    );
};

export default ControlledForm;

非受控组件示例

import React, { useRef } from'react';

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

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

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

export default UncontrolledForm;

实际项目中的选择

1. 使用受控组件的场景：
   • 需要对用户输入进行实时验证、格式化或基于输入动态更新 UI 时，受控组件能方便地在 onChange 事件处理函数中进行处理。
   • 表单数据需要与其他 state 进行关联计算或影响组件其他部分状态时，受控组件能更好地维护数据一致性。
2. 使用非受控组件的场景：
   • 简单表单，只在提交时需要获取表单值，无需实时监听输入变化，使用非受控组件可简化代码。
   • 与第三方 DOM 库或插件集成时，这些库可能直接操作 DOM，非受控组件能更好地与之配合。