时间戳

首页 > 解决方案 > reactjs模式没有显示

javascript - reactjs模式没有显示

问题描述

我是 react-js 的初学者。我有一个关于从 react-bootstrap 调用模态的问题。

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

当我检查我的控制台时，没有返回任何错误。

这是我的完整代码：

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>
            </>
        )
    }

标签： javascriptreactjsreact-modal

解决方案

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

    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 可能是一个很好的选择。

推荐阅读