我有 2 個組件:ModalForm和BookCard. 該ModalForm假設的內部被投入BookCard。當您放置ModalForm- 時,它會創建新按鈕并按原樣運行。但是,如果我想將ModalForm的功能分配給已經存在的按鈕而不是創建新按鈕呢?
BookCard.js
const BookCard = ({id, name, cover, description, price, count, loadResponse}) => {
return (
<Card>
//some code
<ModalForm /*some props*/ />
<button className="edit-button"> // <- the button, I want to be assigned to be opening modal
<box-icon name='edit-alt'/>
</button>
</Card>
);
}
ModalForm.js
const ModalForm = ({/*some props*/}) => {
//some code
return (
<div>
<Button onClick={handleClickOpen} /> // <- the button that is being shown instead of the wanted one
//some code
</div>
);
}
uj5u.com熱心網友回復:
看起來您需要處理案例 BookCard 中最上層組件中的邏輯。所以 ModalForm 有一些像isOpenBookCard一樣的道具,你需要像這樣的狀態isModalOpened,然后添加onClick改變的回呼,state (isModalOpened)然后反應傳遞那個 prop(isOpen) 到你的ModalForm.
轉載請註明出處,本文鏈接:https://www.uj5u.com/gongcheng/353366.html
標籤:javascript 反应
