可以同时拥有onClick的函数props和reactjs的函数吗

Question

你好，我有一个带有两个按钮的模式

<Modal show={props.show} onHide={props.handleModalOpen}>
<Modal.Header closeButton>
<Modal.Title>Fill this form to continue</Modal.Title>
</Modal.Header>
<Modal.Body>This is the modal </Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={props.handleModalOpen}>
Close
</Button>
<Button variant="primary" onClick={()=>(myhadler,props.handleModalOpen)}>
Save Changes
</Button>
</Modal.Footer>
</Modal>

在onClick上，我想触发一个名为的函数

myhandler 

如果使用按下按钮，则关闭模式

props.handleModalOpen. 

props.handleModalOpen正在与作为父级的其他组件通信。我的问题是，当我按下按钮时，我的函数myhandler不起作用，我唯一能做的就是关闭模态。有没有一种方法可以同时运行我的函数和props.handleModalOpen而不会出现问题

功能

myhandler 

用于将表单数据保存在本地存储中

Answer 1

您只需在回调的作用域中调用myHandler()，并在使用handleModalOpen打开按钮时添加状态

const [isOpened, setIsOpened] = useState(false);
<Modal.Footer>
<Button
variant="secondary"
onClick={() => {
props.handleModalOpen();
setIsOpened(true);
}}
>
Close
</Button>
<Button
variant="primary"
onClick={() => {
myHandler();
if (isOpened) {
props.handleModalOpen();
setIsOpened(false);
}
}}
>
Save Changes
</Button>
</Modal.Footer>