React子组件Input与Output联动失效：输入值无法实时更新

你的问题出在两个核心点：

1. 状态不同步：inputItems和outputItems是独立的useState状态，初始化时只是把当时的title值存进去，但后续title更新时，这两个数组里的value不会自动跟着变——useState的初始值只在组件首次渲染时生效，不会自动同步依赖的其他状态。
2. 状态复用冲突：所有Input/Output组共用同一个title状态，根本没法实现“一组相互关联且独立于其他组”的需求，多组添加后只会全部绑定到同一个值上。

我们需要把每组的状态单独管理，用一个数组来存储所有组的信息（包含唯一ID和对应的值），这样每组的Input和Output都绑定到自身组的状态上，添加新组时也能创建独立的状态项。

修改后的父组件代码 #

import { useState } from 'react';
import InputTest from './InputTesting';
import TestOutput from './OutputTest';

const PageToCombine = () => {
    // 用数组存储所有组，每个元素包含id和对应的值
    const [groups, setGroups] = useState([
        { id: 32, value: 'qwrqw!' } // 初始一组数据
    ]);

    // 处理输入变化：根据组ID更新对应的值
    const handleInputChange = (groupId, event) => {
        setGroups(prevGroups => 
            prevGroups.map(group => 
                group.id === groupId 
                    ? { ...group, value: event.target.value } 
                    : group
            )
        );
    };

    // 添加新组的逻辑：生成唯一ID（这里用时间戳简单实现）
    const addNewGroup = () => {
        const newId = Date.now();
        setGroups(prevGroups => [...prevGroups, { id: newId, value: '' }]);
    };

    return (
        <div>
            {/* 添加新组的按钮 */}
            <button onClick={addNewGroup}>添加新的输入输出组</button>

            {/* 渲染所有Input组件 */}
            <div className="input-container">
                {groups.map(group => (
                    <InputTest
                        key={group.id}
                        id={group.id}
                        type="text"
                        value={group.value}
                        onChange={(e) => handleInputChange(group.id, e)}
                    />
                ))}
            </div>

            {/* 渲染所有Output组件 */}
            <div className="output-container">
                {groups.map(group => (
                    <TestOutput
                        key={group.id}
                        id={group.id}
                        value={group.value}
                    />
                ))}
            </div>
        </div>
    );
};

export default PageToCombine;

InputTest组件（无需大改，保持原样即可） #

// 假设classes已经定义，或者根据你的样式调整
const InputTest = (props) => {
    return (
        <input className={classes.inputTestStyle} {...props} />
    );
};

export default InputTest;

TestOutput组件（移除无用的onChange，H1标签不需要onChange事件） #

const TestOutput = (props) => {
    return (
        <div>
            <h1>{props.value}</h1>
        </div>
    );
};

export default TestOutput;

1. 状态合并：把原来分开的inputItems、outputItems和title合并成groups数组，每个组的ID和值放在一起，确保每组状态独立。
2. 针对性更新：handleInputChange函数通过组ID精准更新对应组的value，不会影响其他组。
3. 移除冗余属性：TestOutput组件里的H1标签不需要onChange事件，直接去掉即可，避免无效代码。
4. 添加组逻辑：补全了添加新组的按钮和对应函数，用时间戳生成唯一ID保证每组的唯一性。

这样修改后，每组的Input输入值会实时同步到对应的Output上，而且多组之间完全独立，符合你的需求。

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