单击弹出窗口中的提交按钮后如何调用带参数的函数？

Question

在 React 中，我创建了一个包含本地弹出状态的组件。在 onClick 处理程序的帮助下，我更改了本地状态以显示弹出窗口。 Popup 组件又包含确认按钮。我只想在单击确认按钮后调用函数 deleteItem 。但我不知道该怎么做。在下面的代码中，项目在弹出窗口出现后立即被删除，但只有当我按下 Popup 组件中的按钮时才需要删除它。如果我理解正确，当弹出窗口出现时组件的状态会发生变化，我必须将它传给 MainComponent，只有在这种情况下才会调用函数 deleteItem。

import {deleteItem} from './item-reducer';

const MainComponent = ({items}) => {
 const [visiblePopup, setVisiblePopup] = useState(false);
    return( 
       {items.map(item => <li key={item.id}></li>
       <img onClick={() => {
         setVisiblePopup(true);
         deleteList(item.id) // I have to call this function after the button 
         in the Popup component is pressed
        }}
       />
    )}
   <Popup setVisiblePopup={setVisiblePopup}
  )
}

Popup.jsx
<div onClick={() => setVisiblePopup(false)} /> 
    Confirm
</div>

我必须完成的事情 1) 我点击 img 并弹出窗口 2) 我按 '确认' 3) 函数 deleteItem 被调用 4) 弹出窗口消失。

Answer 1

如果我理解正确，这就是你要找的东西？

const MainComponent = ({items}) => {
    const [modalState, setModalState] = useState({
        display: false,
        deleteItemId: undefined
    });

    const modalCallback = useCallback((deleteItemId)=>{
        deleteItem(deleteItemId)
        setModalState({ display: false, deleteItemId: undefined })
    },[])

    
    return( 
        <Fragment>
            {
                items.map(item => (
                    <Fragment>
                        <li key={item.id}></li>
                        <img onClick={() => setModalState({ display: true, deleteItemId: item.id })} />
                    </Fragment>
                ))
            }
            <PopupModal 
                visible={modalState.display} 
                deleteItemId={modalState.deleteItemId} 
                callback={modalCallback}
            />
        </Fragment>
    )
}


const PopupModal = ({ visible, deleteItemId, callback }) => {
    return (visible ? <div onClick={ () => callback(deleteItemId)}>Confirm</div> : null)
}

--- 或 ----

const MainComponent = ({items}) => {
    const [modalState, setModalState] = useState({
        display: false,
        deleteItemId: undefined
    });
    
    return( 
        <Fragment>
            {
                items.map(item => (
                    <Fragment>
                        <li key={item.id}></li>
                        <img onClick={() => setModalState({ display: true, deleteItemId: item.id })} />
                    </Fragment>
                ))
            }
            modalState.display ? <div onClick={() => [deleteList(modalState.deleteItemId), setModalState({display: false, deleteItemId: undefined}) ]}>Confirm</div> : null
        </Fragment>
    )
}