React如何将Input组件的输入值传递给Home父组件？

要让Home组件实时获取Input的输入值，核心思路是状态提升——把输入状态从Input组件移到最顶层的Home组件，通过props将状态和更新方法逐层传递下去，具体修改如下：

修改Home.jsx #

在Home中维护表单状态，并定义统一的输入处理函数，将状态和函数传给UserForm：

import React, { useState } from 'react';
import UserForm from '../components/UserForm';
import './Home.scss';

export default function Home() {
    // 维护表单的输入状态，区分不同输入框
    const [formData, setFormData] = useState({
        name: '',
        email: ''
    });

    // 统一处理输入变化，通过name属性区分不同输入框
    const handleInputChange = (e) => {
        const { name, value } = e.target;
        setFormData(prev => ({
            ...prev,
            [name]: value
        }));
    };

    // 这里可以实时打印输入值，验证是否获取成功
    console.log('当前输入值:', formData);

    return (
        <div className="home-container">
            <div className="card-container">
            </div>
            <div className="description-container">
                <div className="form-container">
                    {/* 将状态和处理函数传给UserForm */}
                    <UserForm formData={formData} handleInputChange={handleInputChange} />
                </div>
            </div>
        </div>
    )
}

修改UserForm.jsx #

作为中间组件，接收Home传递的props，再转发给对应的Input组件，并给每个Input指定唯一的name属性：

import React from 'react';
import Input from './Input';

export default function UserForm(props) {
    return (
        <div className="user-form">
            <form>
                <Input
                    placeholder="Nome a ser impresso"
                    name="name"
                    value={props.formData.name}
                    onChange={props.handleInputChange} />
                <Input 
                    placeholder="E-mail" 
                    type="email"
                    name="email"
                    value={props.formData.email}
                    onChange={props.handleInputChange} />
            </form>
        </div>
    )
}

修改Input.jsx #

移除自身的状态，完全使用父组件传递过来的value和onChange：

import React from 'react';
import './Input.scss';

export default function Input(props) {
    return (
        <div className="input-holder">
            <input
                type={props.type || 'text'}
                placeholder={props.placeholder}
                name={props.name}
                value={props.value}
                onChange={props.onChange}/>
        </div>
    )
}

原理说明 #

React遵循单向数据流，子组件的状态无法直接传递给父组件，通过状态提升把需要共享的状态放到共同的父组件（Home）中，子组件通过调用父组件传递的方法来更新状态，父组件状态更新后再把最新值传递给子组件，这样Home就能实时获取到所有输入框的内容了。

内容的提问来源于stack exchange，提问作者MrRobot