将 Modal class 组件转换为带钩子的功能组件

Question

我正在尝试将 MDBootstrap 的模态 class 组件转换为带有挂钩的功能组件，但它没有按预期工作。当我点击按钮时，模态出现但并没有消失

这里是 class 组件

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 class 组件转换为带钩子的功能组件

Converting a Modal class component to a functional component with hooks

javascript

reactjs

mdbootstrap