useState钩子不打开react模式

Question

我有一个呈现react-modal的组件，我的问题是react-modal没有打开。modalFileNameOpen useState属性没有正确设置。

const [modalFileNameOpen, setmodalFileNameOpen] = useState(false)

const handleFileNameChangeClick = () => {
    console.log(modalFileNameOpen)    // set to false
    setmodalFileNameOpen(true)     // this does not set the `modalFileNameOpen` to true. 
    console.log(modalFileNameOpen)    // is still false
}

return (
<div className="container-fluid">
    <input type="button" className="btn" onClick={handleFileNameChangeClick} value="Rename File"></input>

    <ModalFileName modalFileNameOpen={modalFileNameOpen} />

  </div>
)

我有另一个组件ModalFileName

import React, { useState } from 'react';
import Modal from 'react-modal';
Modal.setAppElement('#root');
const ModalFileName = ({ modalFileNameOpen }) => {
    const [modalIsOpen, setModalIsOpen] = useState(modalFileNameOpen)

    return (
        <Modal isOpen={modalIsOpen} onRequestClose={() => setModalIsOpen(false)}>
            <div>
                <h1>File Name Change</h1>
                <div>
                    <button onClick={() => setModalIsOpen(false)}>Close</button>

                </div>
            </div>
        </Modal>
    )
}

export default ModalFileName;

Answer 1

下面是一个你似乎想要达到的最低限度的例子。

它是将状态拉到父函数并将处理程序函数向下传递给子函数的基本说明。在您的代码中，您试图通过基于父级的状态在子节点中声明一个新的状态来实现这一点，这会导致不必要的重复和可能的状态冲突。

我们声明我们的模态状态和setter以及一个基本的处理程序函数：

const [openModal, setOpenModal] = useState(false);

  const toggleModal = () => {
    setOpenModal(!openModal);
  }

然后，我们根据当前状态值有条件地呈现模态组件。如果openModal为false，则呈现按钮以打开它，否则我们呈现Modal组件，并将处理程序函数toggleModal作为支柱传递给它。

// if openModal is false render the button, else render our modal
{!openModal ?
   <button type="button" onClick={toggleModal}>Open Modal</button>
   : <Modal handler={toggleModal} />
}

如果模型被呈现，它将接收处理程序(此处通过析构function Modal({handler}) {...检索)，并将其分配给我们的模式上的关闭按钮的onClick。

function Modal({handler}) {

  return (
    <div className="modal" >
      <p>I'm a modal</p>
      <button type="button" onClick={handler}>Close Modal</button>
    </div>
  )
}

工作示例

​

body {
  padding: 0;
  margin: 0;
}

.container {
  position: relative;
  height: 100vh;
  width: 100vw;
  background: gray;
}

.modal {
  height: 50vh;
  width: 50vw;
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  background-color: aqua;
 }

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<div id="App"></div>
<script type="text/babel">
  const {useState} = React;

function App() {
  const [openModal, setOpenModal] = useState(false);

  const toggleModal = () => {
    setOpenModal(!openModal);
  }

  return (
    <div className="container">
      {!openModal ?
      <button type="button" onClick={toggleModal}>Open Modal</button>
      : <Modal handler={toggleModal} />
      }
    </div>
  )
}

function Modal({handler}) {

  return (
    <div className="modal" >
      <p>I'm a modal</p>
      <button type="button" onClick={handler}>Close Modal</button>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('App'));
 </script>

​

几个注意事项

如果您在console.log()调用之前和之后，您将得到与您在问题中所做的相同的结果；它将打印与它输入的呈现值相同的值。如果没有，就会有问题，而你已经改变了状态。来自文档

永远不要直接变异this.state，因为调用setState()之后可能会替换您所做的突变。对待this.state就好像它是不可变的。

const [openModal, setOpenModal] = useState(false);

  const toggleModal = () => {
    console.log(openModal);   // prints the value of openModal on entering render
    setOpenModal(!openModal); // sets openModal to !openModal
    console.log(openModal);   // prints the value of openModal on entering render 
  }

另外，您可能希望向传递的处理程序传递参数(可以说，close按钮应该始终将openModal设置为false，而不是希望切换它会关闭它)。

要做到这一点，只需在处理程序函数中接受一个参数。

const toggleModal = (newState) => {
    setOpenModal(newState);
  }

并在您的onClick调用中传递它。

<button type="button" onClick={() => toggleModal(true)}>Open Modal</button>

function Modal({handler}) {

  return (
    <div className="modal" >
      <p>I'm a modal</p>
        <button type="button" onClick={() => handler(false)}>Close Modal</button>
    </div>
  )
}