如何在无状态组件InputRetro中更新LoginForm的state？

需求：当InputRetro中id为username和password的输入框值变化时，更新LoginForm的state.loginData.username和state.loginData.password。

解决方案步骤： #

1. 在LoginForm组件中添加状态更新处理函数

在LoginForm类中新增处理输入变化的方法，并将该方法及当前状态值传递给InputRetro组件：

import React, { Component } from 'react';
import './LoginForm.css';

import InputRetro from './InputRetro';

class LoginForm extends Component {

    state = {
        loginData : {
            username : null,
            password : null,
        },
        inputs : [
            { id : 'username', label : 'Username', type : 'text' },
            { id : 'password', label : 'Password', type : 'password' },
        ],
    }

    // 新增：处理输入变化并更新状态
    handleInputChange = (inputId, value) => {
        this.setState(prevState => ({
            loginData: {
                ...prevState.loginData,
                [inputId]: value
            }
        }));
    }

    inputsJSX = this.state.inputs.map(input => {
        return (
            <InputRetro 
                id={input.id} 
                label={input.label} 
                type={input.type} 
                key={input.id}
                value={this.state.loginData[input.id]}
                onChange={this.handleInputChange}
            />
        );
    });

    handleLogin = e => {
        e.preventDefault();
        // 此时可通过this.state.loginData获取最新输入值
        console.log('登录数据:', this.state.loginData);
    }

    render() {
        return (
            <form className='login-form' onSubmit={this.handleLogin}>
                { this.inputsJSX }
            </form>
        );
    }
}

export default LoginForm;

2. 修改InputRetro组件，绑定事件并调用父组件函数

在InputRetro中为input标签添加onChange事件，将输入框的id和当前值传递给父组件的处理函数：

import React from 'react';
import './InputRetro.css';

let InputRetro = props => {
    const { id, label, type, placeholder, value, onChange } = props;

    // 新增：触发输入变化时调用父组件方法
    const handleLocalChange = e => {
        onChange(id, e.target.value);
    }

    return (
        <div className='InputRetro'>
            <label>{label}</label>
            <input 
                id={id} 
                type={type} 
                placeholder={placeholder}
                value={value || ''}
                onChange={handleLocalChange}
            />
        </div>
    );
}

export default InputRetro;

核心逻辑说明： #

• 通过props传递父组件的状态更新函数是React父子组件通信的标准方式，子组件无法直接修改父组件状态，只能通过调用父组件提供的方法完成。
• 给input绑定value属性实现受控组件，确保输入框的值始终与父组件状态同步，避免状态不一致问题。

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