面试题：React 中如何使用受控组件处理表单输入

Question

在 React 项目中，假设我们有一个简单的文本输入框和一个按钮，点击按钮要获取输入框的值并打印出来。请使用受控组件的方式实现这个功能，并简要说明受控组件的原理。

Answer 1

实现代码

import React, { useState } from'react';

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

    const handleClick = () => {
        console.log(inputValue);
    };

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

    return (
        <div>
            <input type="text" value={inputValue} onChange={handleChange} />
            <button onClick={handleClick}>点击获取值</button>
        </div>
    );
};

export default InputAndButton;

受控组件原理

在 React 中，受控组件是指其值由 React 组件的 state 控制的表单元素。例如 <input>、<textarea>、<select> 等。

原理如下：

1. 值的控制：表单元素的值通过 value 属性绑定到 React 组件的 state 中。这意味着表单元素的值完全由 state 决定，而不是由 DOM 自身维护。
2. 状态更新：当表单元素的值发生变化时（如用户在输入框中输入内容），会触发 onChange 事件。在 onChange 事件处理函数中，通过调用 setState（或 React Hook 中的 setXxx）方法来更新 state，从而更新表单元素的值。这样，React 能够根据 state 的变化重新渲染组件，保证视图与 state 的一致性。

通过这种方式，React 可以对表单数据进行集中管理和控制，方便进行数据验证、实时反馈等操作。