Question

我正在尝试将MDBootstrap的Modal类组件转换为带有钩子的Functional组件，但无法正常工作。当我单击按钮时，模态出现，但没有消失

此处是类组件

class ModalPage extends Component {
    state = {
        modal8: false
    }

    toggle = nr => () => {
        let modalNumber = 'modal' + nr
        this.setState({
            [modalNumber]: !this.state[modalNumber]
        });
    }

    render() {
        return (
            <MDBContainer>
                <MDBIcon far icon="eye" onClick={this.toggle(8)}>

                </MDBIcon>
                <MDBModal isOpen={this.state.modal8} toggle={this.toggle(8)} fullHeight position="top">
                    <MDBModalHeader toggle={this.toggle(8)}>MDBModal title</MDBModalHeader>
                    <MDBModalBody>
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
                        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
                        consequat.
                    </MDBModalBody>
                    <MDBModalFooter>
                        <MDBBtn color="secondary" onClick={this.toggle(8)}>Close</MDBBtn>
                        <MDBBtn color="primary">Save changes</MDBBtn>
                    </MDBModalFooter>
                </MDBModal>
            </MDBContainer>
        );
    }
}

export default ModalPage;

以及我用钩子尝试过的东西

const ModalPage = props => {
    const [modal8, setModal8] = useState(false);

    const toggle = nr => () => {
        let modalNumber = 'modal' + nr;
        setModal8({
            [modalNumber]: !modal8[modalNumber]
        });
    }
    return(
        <MDBContainer>
            <MDBIcon far icon="eye" onClick={toggle(8)}>

            </MDBIcon>
            <MDBModal isOpen={modal8} toggle={toggle(8)} fullHeight position="top">
                <MDBModalHeader toggle={toggle(8)}>MDBModal title</MDBModalHeader>
                <MDBModalBody>
                    Lorem ipsum dolor sit amet, consectetur
                </MDBModalBody>
                <MDBModalFooter>
                    <MDBBtn color="secondary" onClick={toggle(8)}>Close</MDBBtn>
                    <MDBBtn color="primary">Save changes</MDBBtn>
                </MDBModalFooter>
            </MDBModal>
        </MDBContainer>
    )
}
export default ModalPage;

Answer 1

我只需要做setModal8(!modal8)

Answer 2

像这样使用useState钩子：

const [modal8, setModal8] = useState(false);

允许您这样更新状态：

setModal8(true);

在您的情况下，您想切换modal8的值。您可以使用not（!）这样的运算符轻松实现此目的：

setModal8(!modal8);

使用钩子将Modal类组件转换为功能组件

2 个答案: