ReactJS - 如何在同一事件中將數據從子組件傳遞到父組件和父組件到子組件？

Question

我有一個React應用程序和組件結構如下所示

app.component.ts

<App>
<Products></Products>
</App>

product.component.ts

export const ProductComponent = () => {

const [category, setcategory] = useState("retail");
const [products, setProducts] = useState([]);   
const categorySelectHandler = (selectedCategory:string) => {
  setcategory(selectedCategory);
}

useEffect(() => {
 getProductsByCategory(category).then((products) => {
  setProducts(products);
   }
  });
  }, [category]);
  
return (
  <>
  <CategorySelector onCategorySelected={categorySelectHandler }></CategorySelector>
  { products.map((product) => {
  return ( 
   <div> 
    <b> {product.name} </b>
    <i> {product.price} </b>
   }
 </>}

categorySelector.component.ts

const CategorySelector: React.FC <CategorySelectorProps> = ({
onCategorySelected,
}) => {

const emptydata: Data[] = [];

const [category, setcategory] = useState("retail");

const [data, setdata] = useState(emptydata);

const categorySelectorHandler = (e: SyntheticEvent) => {
    e.preventDefault();
    const element = e.target as HTMLInputElement;
    setcategory(element.value);
    onCategorySelected(element.value);
};

return ( 
  <div>
    <select defaultValue = {category}  onChange = {categorySelectorHandler} >
     <option value = "retail" > Retail </option> 
     <option value = "electronics" > Electronics < /option> 
  </select>

    {
        data.map((_data: data) => {
            return ( <a href = "#" > {
                    _data.name
                } < /a> <
                /div>
            );
        })
    } 
    </div>
)};

export default CategorySelector;

在 CategorySelector 組件（子組件）中的下拉列表的onChange事件中，我獲取所選值並將其傳遞給父組件，即ProductComponent 。 ＆這反過來觸發 ajax 調用 API 將根據所選類別返回產品列表。

直到這沒有問題

現在在同一個事件中，我需要將產品列表傳回給子組件，即CategorySelector

長話短說

在子組件中的事件上，將數據傳遞給父組件（這里沒有問題），但是在同一個事件上，我需要將數據從父組件傳遞回子組件。

Answer 1

在 API 調用之后，您已經在父組件中設置產品。 現在您所要做的就是將產品作為道具傳遞給子組件。 十分簡單！

<CategorySelector onCategorySelected={categorySelectHandler } products={products}></CategorySelector>