如何将多个React子组件的数据存入父组件的单个数组

当前每个子组件（First/Second）独立维护自己的Items数组，点击按钮时会将自身的数组传递给父组件，直接覆盖父组件的ChildData，导致父组件只能显示单个子组件的输入内容。同时父组件初始状态设为空字符串，不符合存储多文本项的需求。

让父组件统一管理全局的输入数据数组，子组件仅负责收集输入文本并传递给父组件，由父组件完成数组的追加操作。

修改后的代码 #

Test组件 #

function Test() {
    // 初始化为空数组，用于存储所有子组件的输入内容
    const [childData, setChildData] = useState([]);
    
    console.log(childData);

    // 定义添加数据的方法，接收子组件传来的文本并追加到数组
    const addChildData = (newItem) => {
        setChildData(prev => [...prev, newItem]);
    };

    return (
        <div>
            <h1>Test</h1>
            <div>
                {childData.length > 0 ? (
                    <div>
                        {childData.map((data, index) => (
                            <div key={index}>{data}</div>
                        ))}
                    </div>
                ) : null}
            </div>
            <First passChildData={addChildData}/>
            <Second passChildData={addChildData}/>       
        </div>
    );
}

First组件 #

function First(props) {
    const [data, setData] = useState('');

    const handleChange = (e) => {
        setData(e.target.value);
    };

    const handleClick = () => {
        if(data.trim() !== ''){
            // 直接将当前输入的文本传给父组件
            props.passChildData(data);
            setData('');
        } else {
            console.log("请输入内容");
        }
    };

    return (
        <div>
            <h1>First</h1>
            <input type="text" onChange={handleChange} value={data}/>
            <button onClick={handleClick}>Add</button>
            {data}
        </div>
    );
}

Second组件 #

function Second(props) {
    const [data, setData] = useState('');

    const handleChange = (e) => {
        setData(e.target.value);
    };

    const handleClick = () => {
        if(data.trim() !== ''){
            // 直接将当前输入的文本传给父组件
            props.passChildData(data);
            setData('');
        } else {
            console.log("请输入内容");
        }
    };

    return (
        <div>
            <h1>Second</h1>
            <input type="text" onChange={handleChange} value={data}/>
            <button onClick={handleClick}>Add</button>
            {data}
        </div>
    );
}

效果验证 #

按以下步骤操作：

• 在First组件输入“What”并点击Add
• 在Second组件输入“is”并点击Add
• 在First组件输入“your”并点击Add
• 在Second组件输入“name?”并点击Add

父组件Test会按输入顺序显示：

What
is
your
name?

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