时间戳

首页 > 解决方案 > 可以同时在 onClick 函数 props 和 reactjs 函数吗？

javascript - 可以同时在 onClick 函数 props 和 reactjs 函数吗？

问题描述

您好，我有一个带有两个按钮的模态

           <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

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

标签： javascriptreactjsbootstrap-modal

解决方案

如果按钮打开时，您可以调用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>

推荐阅读