單擊背景幕（ReactJS）時模態不關閉

Question

我在嘗試通過單擊背景幕關閉模式時遇到問題。

下面我有一個功能組件，其中有一個帶有一些輸入的表單，當填寫並單擊保存按鈕時，會出現一個模式。 我正在使用show constant 來操作它，例如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;

模態出現了，但是不能關閉，比如Backdrop。 單擊背景幕時，兩者都應該消失。

背景組件

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來查看單擊背景時顯示常量值是否更改為 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 。