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 值相反的值。