单击背景（ReactJS）时模态不关闭

Question

我在尝试通过单击背景关闭模式时遇到问题。

下面我有一个功能组件，其中有一个带有一些输入的表单，当填写并单击保存按钮时，会出现一个模式。我使用 show 常量来操作它，例如方法 showModal 和 hideModal。 SaveButton 组件不会干扰与此问题相关的任何事情，这就是我没有在这里展示它的原因。

import React, { useState } from 'react';
import { useForm } from 'react-hook-form';
import SaveButton from '../../UI/Buttons/SaveButton/SaveButton';
import Modal from '../../UI/Modal/Modal';


const CreateProject = () => {
    const { register, handleSubmit, errors } = useForm();
    const [show, setShow] = useState(false);

const showModal = () => {
    console.log(show);
    setShow({ show: !show });
};

const hideModal = () => {
    console.log(show);
    setShow({ show: false });
};

const onSubmit = (data, e) => {
    showModal();
    e.target.reset();
};

const fields = [
    {
        name: "Project Name",
        type: "text"
    },
    {
        name: "Lens Quantity",
        type: "number"
    },
    {
        name: "Description",
        type: "textarea"
    }
];

return (
    <div>
        <form id="parent"
            style={{ width: "100%", display: "flex", top: "20%", justifyContent: "center" }}
            onSubmit={handleSubmit(onSubmit)}>
            <div>
                <div>
                    {
                        fields.map(({ name, type }) => (
                            <div key={name}>
                                <div className="input-group col" style={{ marginTop: "3px" }}>
                                    <div className="input-group-prepend">
                                        <span className="input-group-text">{name}</span>
                                    </div>
                                    {type !== "textarea" ?
                                        <input type={type} min="0"
                                            onKeyDown={e => (e.keyCode === 189) && e.preventDefault()}
                                            className="form-control" name={name} ref={register({ required: true })} />
                                        :
                                        <textarea className="form-control" name={name} ref={register} />
                                    }
                                </div>
                                {errors[name] && <span style={{ color: "#cf1b1b", display: "flex", paddingLeft: "18px" }}>Please enter a {name}.</span>}
                            </div>
                        ))
                    }
                </div>
                <SaveButton />
            </div>
        </form>    
         <Modal show={show} modalClosed={hideModal}>
                Success!
        </Modal>
    </div>
  )
}

export default CreateProject;

模态出现了，但我无法关闭它，例如背景。单击背景时，两者都应该消失。

背景组件

import React from 'react';
import './Backdrop.css';

const Backdrop = (props) => (
    props.show ? <div className="backdrop" onClick={props.clicked}></div> : null
);

export default Backdrop;

我放了一些 console.logs 来查看单击背景时 show 常量值是否变为 false 并且确实如此，但我不知道为什么当 show 常量设置为 false 时，模态和背景不会消失。

模态组件

import React, { Component } from 'react';
import Backdrop from '../Backdrop/Backdrop';
import Aux from '../../hoc/Auxiliary/Auxiliary';
import './Modal.css';

class Modal extends Component {
    shouldComponentUpdate(nextProps, nextState) {
        return nextProps.show !== this.props.show || nextProps.children !== this.props.children;
    }
    render() {
        console.log("Show", this.props.show)
        return (
            <Aux>
                <Backdrop show={this.props.show} clicked={this.props.modalClosed} />
                <div className="save-modal"
                    style={{
                        transform: this.props.show ? 'translateY(0)' : 'translateY(-100vh)',
                        opacity: this.props.show ? '1' : '0',
                    }}>
                    {this.props.children}
                </div>
            </Aux>
        );
    }
};

export default Modal;

辅助组件

const Auxiliary = (props) => props.children;

export default Auxiliary;

为了便于理解，这里我留下代码示例。

谢谢大家！

Answer 1

在 hideModal 方法中，只需使用布尔值调用 setShow 方法。不带对象：

const hideModal = () => {
    console.log(show);
    setShow(false);
};

Answer 2

在hideModal 中，当您调用setShow({show: false}) 时，您应该使用setShow(false)！

我猜你本能地使用它，好像它是setState。