我有一個子導航組件，我正在嘗試獲取父組件中所選專案的鍵，以將我的狀態更新為所選導航專案。我在子組件中使用地圖，我似乎無法將所選專案的鍵傳遞回父專案以設定狀態。這是我的組件
家長
** my function to set the nav item **
let navPress = async key => {
let selNavItem = await navItems.find(object => {
return object.key === key
});
setActiveNavItem(selNavItem.key)
}
** return for parent component **
return(
<ProjectDetailNav
navItems={navItems}
activeNavItem={activeNavItem}
onClick={() => navPress}
/>
)
具有地圖功能的子組件（導航）
<div id='nav-container'>
{props.navItems.map(navItem => {
if (navItem.key === props.activeNavItem) {
// console.log(navItem.key)
return (
<button className='active-nav-item' key={navItem.key} onClick={props.onClick(navItem.key)}>
<img className='nav-item-icon' src={navItem.icon} />
<h6 className='nav-item-title'>{navItem.title}</h6>
</button>
)
} else {
return (
<button className='nav-item' key={navItem.key} onClick={props.onClick(navItem.key)}>
<img className='nav-item-icon' src={navItem.icon} />
<h6 className='nav-item-title'>{navItem.title}</h6>
</button>
)
}
})}
</div >
uj5u.com熱心網友回復：
通過onClick={props.onClick(navItem.key)}您將回傳值分配props.onClick給按鈕單擊事件，在渲染時立即呼叫它。它應該包裝在一個函式中。
<button
className="active-nav-item"
key={navItem.key}
onClick={() => props.onClick(navItem.key)}
>
<img className="nav-item-icon" src={navItem.icon} />
<h6 className="nav-item-title">{navItem.title}</h6>
</button>
這樣，當onClick事件被觸發時，將呼叫匿名函式，該函式將呼叫props.onClick(navItem.key).
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/417451.html
標籤：