当单选按钮被触发时,将过滤后的产品数据发送到React中的另一个组件可以通过以下步骤实现:
下面是一个示例代码:
// 父组件
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';
const ParentComponent = () => {
const [filteredData, setFilteredData] = useState([]);
const handleRadioButtonChange = (event) => {
// 根据单选按钮的选择状态进行产品数据的过滤
const filteredProducts = /* 进行产品数据过滤的逻辑 */;
setFilteredData(filteredProducts);
};
return (
<div>
{/* 单选按钮 */}
<input type="radio" name="filter" onChange={handleRadioButtonChange} />
{/* 子组件 */}
<ChildComponent filteredData={filteredData} />
</div>
);
};
export default ParentComponent;
// 子组件
import React from 'react';
const ChildComponent = ({ filteredData }) => {
return (
<div>
{/* 使用过滤后的产品数据进行展示或其他操作 */}
{filteredData.map((product) => (
<div key={product.id}>{product.name}</div>
))}
</div>
);
};
export default ChildComponent;
在上述示例中,父组件包含一个单选按钮和一个子组件。当单选按钮的选择状态发生变化时,触发handleRadioButtonChange
函数进行产品数据的过滤,并将过滤后的数据存储在filteredData
状态变量中。然后,将过滤后的产品数据作为props传递给子组件ChildComponent
,子组件可以通过props接收并使用这些数据进行展示或其他操作。
领取专属 10元无门槛券
手把手带您无忧上云