onClick 功能仅在第一次反应中有效？答案

【问题标题】：onClick function only works for the first time in react?onClick 功能仅在第一次反应中有效？
【发布时间】：2020-06-16 07:52:07
【问题描述】：

我有两个单独的组件，即 Header 和 Modal。 Navbar 中有一个附加了 onClick 功能的按钮。通过单击它，状态会发生变化，因此状态会作为道具传递给模态，然后触发它。然后状态再次设置为假。但是，如果我再次单击该按钮，则不会出现模式。即使使用 useEffects，我也尝试了许多不同的方法，但没有任何效果。

标题代码

const Header = () => {
const [modal, setModal] = useState(false)

return( 
<div>
{modal ? <ModalProduct showModal={true} /> : null}
<ul class="nav navbar-nav ml-auto">
         <li><Button variant="danger" style={{ marginTop: '8px' }} onClick={() => setModal(true)}>Add 
         new product</Button></li></ul>)
 </div>)

对于我拥有的模态组件

export default function ModalProduct(props) {
const [show, setShow] = useState(props.showModal);

const handleClose = () =>
    setShow(false);

return (
    < div >
        <Modal show={show} onHide={handleClose}>
           ...
        </Modal>
    </div >
);

}

与钩子有关，它在第一次弹出模式时变为真，然后变为假，但随后不再变为真。

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

将 onClick 指向一个函数，该函数将通过 if true->false 和 false->true 来处理状态切换。

const Header = () => {
const [modal, setModal] = useState(false)

const triggerModel = () => {
  setModal(!modal)
}

return( 
<div>
{modal ? <ModalProduct showModal={triggerModel} /> : null}
<ul class="nav navbar-nav ml-auto">
         <li><Button variant="danger" style={{ marginTop: '8px' }} onClick={() => setModal(true)}>Add 
         new product</Button></li></ul>)
 </div>)

【讨论】：

但是如果我这样做，模态将永远不会打开，因为在模态打开之前，状态变为 false

【解决方案2】：

您正在为同一件事使用 2 个状态（显示/隐藏模式）。你只需要一个状态。从ModalProduct 组件中删除状态，然后使用父组件Header 中的props 来处理模态。我还重构了您的代码，使其更简洁易读。

const Header = () => {
  const [showModal, setShowModal] = useState(false);

  return( 
    <div>
      <ModalProduct showModal={modal} handleClose={()=> setShowModal(false)} />
        <ul class="nav navbar-nav ml-auto">
            <li>
              <Button variant="danger" style={{ marginTop: '8px' }} onClick={()=>setShowModal(true)}>
                  Add new product
              </Button>
            </li>
        </ul>
</div>

export default function ModalProduct(props) {
  return (
    <Modal show={props.showModal} onHide={props.handleClose}>
      ...
    </Modal>
  );
}

【讨论】：

很高兴能帮上忙！