Question

因此，为了显示弹出窗口，我使用的是模态，但show状态似乎没有改变。

这是我为index.js登录后所做的代码

const Form = ({ initialState = STATE_SIGN_UP, displayPopUp}) => {
  const [mode, toggleMode] = useToggle(initialState);
  const [display, toggleDisplay] = useToggleDisplay(displayPopUp);

  return (
    <Modal className="modal" show={display}  size="lg">
        <Container pose={mode === STATE_LOG_IN ? "signup" : "login"}>
        <div className="container__form container__form--one">
            <FormLogin mode={mode} toggleDisplay={toggleDisplay} />
        </div>
        <div className="container__form container__form--two">
            <FormSignup mode={mode} toggleDisplay={toggleDisplay}/>
        </div>
        <Overlay toggleMode={toggleMode} mode={mode} />
        </Container>
    </Modal>
  );
};

因此，当第一次调用Form时，displayPopUp设置为false并且可以正常工作。

index.js中的表单由另一个组件header.js调用，如下所示。

当我单击标题登录/注册时，按预期将displayPopUp更改为true。

class Header extends React.Component {
    constructor(props, context) {
        super(props);
        this.state = {
            anchorEl: null, 
            showLogin: false};
    }
    
    openLogin = () => {
        this.setState({showLogin: !this.state.showLogin});
    }

    handleClick = (event) => {
        this.setState({ anchorEl: event.currentTarget });
      };
    
    handleClose = () => {
        this.setState({ anchorEl: null })
      };



       render(){
          ...
          return (
            <div>
            <Navbar className="header-village" width="100" expand="lg">
            ...
            </Navbar>
            <LoginRegisterForm displayPopUp={this.state.showLogin} onHide={() => this.setState({ showLogin: false })}/>
            </div>

现在，它正在工作，因为我正在使用displayPopUp显示或不显示模式。但是现在，我还必须能够关闭模式，因此，我在FormLogin和FormSignup中传递了一个回调，以便能够在点击时更新display并关闭情态。

我已经使用类useToggleDisplay进行了翻转，但是没有用。

我看到displayPopUp被分配给false和true，但显示从未改变或toggleDisplay。

这是toggleDisplay中声明的useToggleDisplay的代码

import { useState, useCallback } from 'react'

export const STATE_SHOW = true
export const STATE_HIDE = false
const useToggleDisplay = initialDisplayState => {
  const [display, setDisplay] = useState(initialDisplayState)

  const toggleDisplay = useCallback(
    () => setDisplay((display) => {
        console.log('display: ' + display)
        return !display; 
    }),
    []
  );
  return [display, toggleDisplay];

export default useToggleDisplay

我的目标是能够控制show和FormLogin中的FormSignup值，以确保我可以关闭模态

有什么想法吗？谢谢

useState的行为异常，并且未根据更改进行更新

0 个答案: