在React中,可以使用钩子(hooks)来将对象数组数据从子组件发送到父组件并存储在父对象中。以下是一种实现方式:
import React, { useState } from 'react';
function ParentComponent() {
const [data, setData] = useState([]);
// 处理子组件发送的数据
const handleData = (newData) => {
setData([...data, newData]);
};
return (
<div>
<ChildComponent sendData={handleData} />
{/* 显示存储的数据 */}
{data.map((item, index) => (
<div key={index}>{item.name}</div>
))}
</div>
);
}
import React, { useState } from 'react';
function ChildComponent({ sendData }) {
const [inputData, setInputData] = useState('');
// 处理数据发送
const handleSendData = () => {
// 创建一个新的对象,包含输入的数据
const newData = { name: inputData };
// 调用父组件传递的函数,将数据发送给父组件
sendData(newData);
// 清空输入框
setInputData('');
};
return (
<div>
<input
type="text"
value={inputData}
onChange={(e) => setInputData(e.target.value)}
/>
<button onClick={handleSendData}>发送数据</button>
</div>
);
}
在上述代码中,父组件ParentComponent
通过sendData
属性将处理数据的函数传递给子组件ChildComponent
。子组件中的输入框用于输入数据,点击按钮后,调用handleSendData
函数将输入的数据封装成对象newData
,然后通过sendData
函数将数据发送给父组件。父组件接收到数据后,使用setData
函数更新状态data
,将新的数据添加到数组中。
这样,当子组件发送数据时,父组件会接收并存储在状态中,并在界面上显示出来。
请注意,上述代码中没有提及具体的腾讯云产品和链接地址,因为这些与问题的解决方案无关。如果您需要了解腾讯云的相关产品和服务,可以访问腾讯云官方网站进行查询和了解。
领取专属 10元无门槛券
手把手带您无忧上云