面试题：React中如何通过Props有效管理表单状态

Question

在React中，假设你有一个简单的文本输入表单组件，如何使用Props来管理其输入状态，并将输入值传递到父组件进行处理？请写出关键代码片段并简要解释原理。

Answer 1

关键代码片段

1. 子组件（文本输入表单组件）：

import React from 'react';

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

export default InputForm;

2. 父组件：

import React, { useState } from'react';
import InputForm from './InputForm';

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

    const handleInputChange = (e) => {
        setInputValue(e.target.value);
        // 这里可以进行父组件对输入值的额外处理
    };

    return (
        <div>
            <InputForm value={inputValue} onChange={handleInputChange} />
            {/* 可以在此处使用inputValue进行其他展示等操作 */}
        </div>
    );
};

export default ParentComponent;

原理解释

1. 子组件（InputForm）：通过props接收来自父组件传递的value和onChange。value用于设置输入框的当前值，实现受控组件。onChange是一个函数，当输入框的值发生变化时，会调用该函数，并将变化的事件对象传递给它。
2. 父组件（ParentComponent）：使用useState钩子来管理输入框的值，inputValue保存当前输入值，setInputValue用于更新这个值。handleInputChange函数在输入框值变化时被调用，它首先更新inputValue，并且父组件可以在这个函数中对输入值进行进一步处理。然后通过props将inputValue和handleInputChange传递给子组件InputForm，从而实现了子组件输入状态由父组件通过props管理，并将输入值传递到父组件处理的功能。