經過幾個小時的尋找正確答案后，我找不到任何地方。我會盡力解釋我的情況。我的網站上有一個圖像輪播，我希望在用戶觸發并單擊圖像時將其打開。所以基本上我的網站上有 5 個圖像，無論用戶選擇哪個圖像，都應該在圖像輪播中打開它。一切都很完美，我做到了這一部分。所以我有一個頁面文件，其中包含輪播所在頁面的所有代碼。然后，我有一個僅用于圖像部分組件的文件，我在其中發送函數handleViewPhotosClick（此函數打開圖像輪播）作為主頁中的道具。因此，在這個文件中，我檢測到哪個圖像被單擊，并將其編號發送到具有更新狀態的圖像輪播組件（它的編號用于打開正確的圖像）。但問題是我無法在一次 onClick 中傳遞handleViewPhotosClickand handleSelectedImage，或者我只是不知道正確的語法。我不會編寫完整的代碼，我只會復制它。列表頁面（主頁）：export default class ListingPage extends Component { constructor(props) { this.state = { imageCarouselOpen: false }; } render() { const handleViewPhotosClick = (e) => { e.stopPropagation(); this.setState({ imageCarouselOpen: true // This opens carousel }); }; return ( <SectionImages handleViewPhotosClick={handleViewPhotosClick} {/* Passing handleViewPhotosClick to SectionImages */} /> ) }}SectionImages（圖像部分）：export default class SectionImages extends Component { constructor(props) { this.state = { selectedImage: null, number: 0 } } handleSelectedImage(number) { this.setState({ selectedImage: number }); } render() { const { handleViewPhotosClick } = this.props; const imageItem = (itemClass, imagePath, number) => { return ( // Is there a way to append handleViewPhotosClick to the bellow onClick function? <div className={itemClass} onClick={() => { this.handleSelectedImage(number) }}> <img src={imagePath} alt={number} /> </div> ); }; ) }}所以基本上我正在嘗試添加handleViewPhotosClick到imageItemonClick 函數。我知道我們可以在一次 onClick 調用中傳遞多個函數，但如何傳遞 props + 函數。希望我說得足夠清楚。我是 React 新手，所以這對我來說可能是錯誤的方法，任何幫助都意義重大。謝謝！
2 回答
一只甜甜圈
TA貢獻1836條經驗 獲得超5個贊
您收到錯誤的原因TypeError: Cannot read property 'stopPropagation' of undefined是因為您number作為參數傳遞。
要測試此行為，您可以執行以下操作：
const handleViewPhotosClick = (value) => {
console.log(value);
// handle the rest
};
如果您還希望傳遞事件對象，那么您應該在SectionImages組件上執行以下操作：
<div className={itemClass} onClick={(e) => { this.handleSelectedImage(e, number) }}>
<img src={imagePath} alt={number} />
</div>
在組件上ListingsPage，
const handleViewPhotosClick = (e, value: number) => {
e.stopPropagation();
console.log(value);
// handle the rest
};
米脂
TA貢獻1836條經驗 獲得超3個贊
如果您想調用作為 prop 傳遞的函數，您始終可以從另一個函數內部執行此操作。只需確保向其傳遞正確的參數（在本例中為事件）：
export default class SectionImages extends Component {
/* constructor */
handleSelectedImage(e, number) {
this.props.handleViewPhotosClick(e);
this.setState({ selectedImage: number });
}
render() {
const imageItem = (itemClass, imagePath, number) => {
return (
<div className={itemClass} onClick={e => this.handleSelectedImage(e, number)}>
<img src={imagePath} alt={number} />
</div>
);
};
/* return statement */
}
}
- 2 回答
- 0 關注
- 171 瀏覽
添加回答
舉報
0/150
提交
取消