reactjs 模态不显示

Question

我是react-js的初学者。我在从 react-bootstrap.

调用模态时遇到问题

我有一个带有 return 语句的功能组件，我的模态就在其中。另外，我有一个带有 <tr> 标签的组件。我想要的是当我点击我的 <tr> 标签中的一行时，我想显示我的模式。

当我检查控制台时没有错误 returned。

这是我的完整代码：

const [employeeInfoModalShow, setEmployeeInfoModalShow] = useState(false);
    const [employeeInfoModalDismiss, setEmployeeInfoModalDismiss] = useState(false);

    const closeEmployeeInfoModalHandler = useCallback(() => {
        setEmployeeInfoModalShow(false);
    }, [employeeInfoModalShow]);

    const modalDTR = () => {        
        if (!employeeInfoModalDismiss) {
            setEmployeeInfoModalShow(true);
          }
          return (
            <Modal
              size="lg"
              backdrop="static"
              show={employeeInfoModalShow}
              onHide={() => {
                setEmployeeInfoModalDismiss(true);
                setEmployeeInfoModalShow(false);
              }}
              backdropClassName="modalBackdrop"
            >
              {(() => {
                return (
                  <>
                    <Modal.Header closeButton></Modal.Header>
                    <Modal.Body>
                      <p>Test</p>
                    </Modal.Body>
                  </>
                );
              })()}
            </Modal>
          );       
    }    

    const Date_columns = (props) => {
        const [hovered, setHovered] = useState(false);        

        const toggleHover = () => {
            setHovered((prevState) => (!prevState));            
        }        
        
        return (
            <>
              <tr onClick={modalDTR} onMouseEnter={toggleHover} onMouseLeave={toggleHover} className={hovered ? `${classes.trHover}`:''}>
                  <td align="center" className={`${classes.borderBlack}`}>{props.date_column}</td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
                  <td align="center" className={`${classes.borderBlack}`}></td>
              </tr>
            </>
        )
    }

Answer 1

也许一个简单的解决方案就是这个：

    const Modal = ({ isOpen }) => {
      // Custom Modal logic
         return !isOpen ? null : <>{// JSX Code Here}</>
     }

     const DateColumns  = ({ ...someProps}) => {
        const [isOpen, setIsOpen] = React.useState(false);

        const handleClick = (_event) => setIsOpen(true);

        return (
          <>
            <Modal isOpen={isOpen} />
            <tr>
            <td onclick={handleClick}></td>
           </tr>
         </>
        );
     }

注意：如果有多行，则需要使用更全局的东西并避免为每一行创建一个模态。如果是这样的话，React Context 可能是一个不错的选择。

reactjs 模态不显示

reactjs modal not showing

javascript

reactjs

react-modal