React 新手，在 Modals 上苦苦挣扎。 这是处理模态的正确方法吗？

Question

我只是无法让它工作。 虽然我很接近，但我觉得我以错误的方式处理模态。 我是吗？ 我只是觉得我这样做的方式非常混乱，哈哈。

所以我有一个事件组件..

export default function Events(props) {

    const [events, setEvents] = useState([]);
    const [openModal, setOpenModal] = useState(false);

    const newEvent = () =>{
        setOpenModal({openModal:true})
        setEvents(
            events => [...events,
            <Event openModal={true}/>]
        );
    }

    console.log('hi from eventss');
    return (
        <div className="Events" onClick={newEvent} style={{width:'100%'}}>
            {events}
        </div>
    )
}

活动分...

它返回一个带有'onclick' 事件的 div。 单击时，它会触发“newEvent” function 。

'newEvent' function 创建一个发送道具openModal=true的事件组件并设置其 state..

这是事件组件

const Event = (props) => {

    const [openModal, setOpenModal] = useState(props.openModal);

    return (

        openModal?
        <ModalEvent isOpen={openModal} backgroundcolor = {props.backgroundcolor}/>
        :
        <div className="Event" style={{backgroundColor: props.backgroundcolor}}>
            new event
        </div>
         
    );
}

export default Event;

Event 将返回ModalEvent 组件，因为 openModal=true..

这是ModalEvent 组件

import React, {useState, useEffect} from 'react';
import Modal from 'react-bootstrap/Modal'
import Button from 'react-bootstrap/Button'
import Event from './Event'

function ModalEvent(props) {
    const [openModal, setOpenModal] = useState(true);
    const [address, setAddress] = useState("");

    const handleChange = (e) =>{
      setAddress({address: e.target.value})
    }

    console.log(openModal);

    useEffect(() =>{
      console.log('effectssss');
    })

    return (
      
      openModal?
      <Modal
        size="sm"
        show={openModal}
        onHide={() => setOpenModal(false)}
        aria-labelledby="example-modal-sizes-title-sm"
      >
        <Modal.Header closeButton>
          <Modal.Title id="example-modal-sizes-title-sm">
            Small Modal
          </Modal.Title>
        </Modal.Header>
        <Modal.Body>
          <div className="container">
            <div className="row">
              <form style={{width:'100%'}}>
                <div className="col-sm-12">
                  <label htmlFor="address"> Address</label>
                  <input type="text" name="address" style={{width:'100%'}}/>
                </div>
                {/* <div className="col-sm-12" style={{marginTop:'20px'}}>
                  <input type="submit" value="Submit" />
                </div> */}
              </form>
            </div>
          </div>
        </Modal.Body>
        <Modal.Footer>
          <Button variant="secondary" onMouseDown={() => setOpenModal(false)}>
            Close
          </Button>
          <Button variant="primary" onMouseDown={() => setOpenModal(false)}>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
      :
      <>
      <Event openModal={false} backgroundcolor={'#' + Math.floor(Math.random()*16777215).toString(16)} address={address}/>
      </>

    );
  }
  
export default ModalEvent;

模态在行动...

ModalComponent将继续返回Model 组件，直到它设置其 openModal=false （它通过按钮 onMouseDown 事件完成）。

所以问题是当我单击模态或屏幕上的任何位置时.. **Events 组件“”再次触发，这会触发另一个模态弹出..

像这样.....

如果我单击按钮关闭模式，模式会关闭它应该是的......

如果我在 ModalBody/ModalFooter 上添加 onClick 事件，它会阻止它触发事件组件，但随后它会关闭（当然）......这无济于事，因为用户需要能够在 model 内部单击并输入地址..

所以是的，我不确定如何处理这个问题，我不确定我是否以正确的方式处理模态，如果我错过了反应如何工作的想法......任何帮助都是感谢感谢！

Answer 1

你可以考虑尝试一些类似的东西

const newEvent = () =>{
        setOpenModal(!openModal)
        setEvents(
            events => [...events,
            <Event openModal={!openModal}/>]
        );
    }

这会将 openModal 设置为与其 boolean 值相反的值。