单击背景ReactJS时模态未关闭

问题描述

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

下面我有一个功能组件，其中有一个带有一些输入的表单，当填写并单击保存按钮时，会出现一个模式。我正在使用 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",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;

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

谢谢大家！

解决方法

在hideModal方法中，只需使用布尔值调用setShow方法即可。没有对象：

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

,

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

我猜您本能地使用了它，就好像它是setState。