React类组件中跨组件更新状态及实现保存功能

问题根源：当前MyComponent自行维护输入框状态，MyContainer的state未同步更新，导致点击保存时父组件拿到的还是初始空值。

最优方案是状态提升——将输入框的状态统一托管到父容器MyContainer中，子组件作为受控组件仅负责渲染和传递用户输入事件，具体实现步骤如下：

1. 修改MyContainer组件 #

• 添加处理输入变化的方法，用于接收子组件传递的输入值并更新自身state
• 将状态值和回调方法通过props传递给MyComponent

修改后代码：

export default class MyContainer extends BaseComponent{
    constructor(props: any) {
        super(props, {
            status : false, 
            nameValue : "",
            contentValue : ""
        });
    }
    componentDidMount = () => {
        console.log(this.state.status);
    };

    // 新增：处理子组件输入变化的回调
    handleInputChange = (id: string, value: string) => {
        if (id === "name") {
            this.setState({ nameValue: value });
        } else if (id === "content") {
            this.setState({ contentValue: value });
        }
    };

    save = () => {
        console.log("Hello I am Save");
        let obj = {
            nameValue: this.state.nameValue, // 现在能拿到最新输入值
            templateValue: this.state.contentValue
        };
        // API Call
    };
    render() {
        return (
            <div>
                <MyComponent
                    nameValue={this.state.nameValue} 
                    contentValue={this.state.contentValue}
                    onInputChange={this.handleInputChange} // 传递回调
                ></MyComponent>   
                <div >
                    <button type="button" onClick={this.save} >Save</button>
                </div>
            </div>
        );
    }
}

2. 修改MyComponent组件 #

• 移除自身维护的输入状态，直接使用props传递的值
• 修正fieldChange方法，从事件对象中获取输入框id和值，调用父组件传过来的回调方法

修改后代码：

export default class MyComponent extends BaseComponent{
    constructor(props: any) {
        super(props, {});
        // 移除自身状态，完全依赖props
    }
    componentDidMount = () => {
        console.log("MOUNTING");
    };

    fieldChange = (e: React.ChangeEvent<HTMLInputElement>) =>{
        const { id, value } = e.target;
        // 调用父组件的回调方法传递输入信息
        this.props.onInputChange(id, value);
    }

    render() {
        return (
            <div>
                <div className="form-group">
                    {/* 受控组件：value绑定props的值，onChange绑定处理方法 */}
                    <input 
                        id="name" 
                        value={this.props.nameValue}
                        onChange={this.fieldChange}
                    ></input>
                    <input  
                        id="content"  
                        value={this.props.contentValue}
                        onChange={this.fieldChange}
                    ></input>
                </div>
            </div>
        );
    }
}

方案优势 #

• 遵循React单向数据流原则，状态变更可追踪，避免状态不一致问题
• 状态集中管理，后续扩展表单验证、数据重置、回显等逻辑时，只需在父组件统一处理
• 子组件职责单一，仅负责渲染和传递事件，复用性更强

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