模态无法正常显示

Question

我试图让我的模态正确弹出打开。我使用的是reactstrap。目前，当点击按钮让它显示时，它显示在底部。

另外，关闭模态按钮也在模态头的底部。我想让模态在页面中间打开，并将背景变暗。同样的事情也发生在另一个模态上，这个模态也在这个页面上显示（一旦有人点击添加植物，它有一个查看或删除的选项，删除也是一个模态）。删除模式也在做同样的事情。

我不认为这有什么关系，但添加新植物是在自己的组件上，并与父应用程序组件绑定。删除是在同一个组件上。弹出的表单是在一个组件上，我把它命名为plantform，下面是其中的一些代码。

const PlantForm = props => {
    const [plant, setPlant] = useState({
        id: props.number,
        nickname:"",
        species: "",
        h2oFrequency: ""
    })

  
    const changeHandler = (event) => {
        setPlant({
            ...plant,
            [event.target.name] : event.target.value
        })
    }

 

    return(
        <Modal isOpen={props.modalProp} toggle={props.modalToggle} style={{width: "40%", marginLeft:"34%"}}>
            <ModalHeader toggle={props.modalToggle} style={{background: "linear-gradient(to right, #81814D, #687158)", textAlign:"center"}}>Add Plant</ModalHeader>
            <ModalBody style={{padding: "15px", border:"1px solid #C7BEAE", background: "linear-gradient(to right, #81814D, #687158)"}}>
                <Form onSubmit={event =>{
                    event.preventDefault()
                    props.addPlant(plant)

                    setPlant({id: "", nickname:"", species: "", h2oFrequency: ""})
                    props.setNumber(props.number+1)
                    props.modalToggle()
                }} >
                    <div className="addPlant">
                        <Title>Add a New Plant</Title>
                    </div>
                    <Label htmlFor="nickname">Nickname your Plant: </Label>
                    <Input
                        id="nickname"
                        type="text"
                        name="nickname"
                        placeholder="Enter your plant's nickname"
                        value={plant.nickname}
                        onChange={changeHandler}
                        />
                    <Label htmlFor="species">Enter your Plant's Species: </Label>
                    <Input
                        id="species"
                        type="text"
                        name="species"
                        placeholder="Enter your plant's nickname"
                        value={plant.species}
                        onChange={changeHandler}
                        />
                    <Label htmlFor="h2o">Select your Water Schedule:</Label>
                    <Select
                        id="h2o"
                        name="h2oFrequency"
                        value={plant.h2oFrequency}
                        onChange={changeHandler}
                        >
                        <option value="" disabled={true}>Select Your Water Schedule</option>
                        <option value="Daily">Daily</option>
                        <option value="Weekly">Weekly</option>
                        <option value="Bi-Weekly">Bi-Weekly</option>
                        <option value="Monthly">Monthly</option>
                    </Select> 
                    <Button type="submit">Add Plant</Button>
                </Form>
            </ModalBody>
          </Modal>
    )
}

export default PlantForm;

这是同一个组件上的删除模式的代码。

const PlantList = props => {

    const [modal, setModal]= useState(false);
    const toggle = () => setModal(!modal);

    const [plants] = useState([])
    
    
    const [plantId, setPlantId] = useState("");
    const openDeleteModal = (id)=> {
        setPlantId(id)
        toggle()
    }
    const deletePlant=() => {
        props.setPlants(props.plants.filter(plant=> plant.id!==plantId))
        setPlantId("")
        toggle()
    }
   console.log(plants)
    return(
        <div>
            <div>
                <Title>List of Plants</Title>
            </div>
            <PlantDiv>
                <Modal isOpen={modal} toggle={toggle} style={{width: "20%", marginLeft:"40%"}}>
                        <ModalBody style={{padding: "15px", border:"1px solid #C7BEAE", background: "linear-gradient(to right, #81814D, #687158)"}}>
                            <ModalPara>Would you like to delete? </ModalPara>
                        </ModalBody>
                        <ModalFooter style={{padding: "15px", border:"1px solid #C7BEAE", background: "linear-gradient(to right, #81814D, #687158)"}}>
                            <Button onClick={deletePlant}>Yes</Button>
                            <Button onClick={toggle}>No</Button>
                        </ModalFooter>
                    </Modal>
            {props.plants.map(plant =>
                <Card key={plant.id}>
                    <Para>Plant Nickname: {plant.nickname}</Para>
                    <Para>Plant Species: {plant.species}</Para>
                    <Para>Water Frequency: {plant.h2oFrequency}</Para>
                    <Link to={`/editplant/${plant.id}`}>
                    <Button>View</Button>
                    </Link>
                    <Button onClick={()=>openDeleteModal(plant.id)}>Delete</Button>
                    
                </Card>
                )}
                </PlantDiv>
                <Button onClick={props.plantToggle}>Add Plant</Button>
                
        </div>
    )
}

export default PlantList;

顺便说一下，我使用styled -components来为页面上的一些东西设置样式 这就是为什么一些标签看起来很奇怪的原因。

Answer 1

这是很正常的事情，要! 下面是大家遵循的秘诀。

1. 你需要一个背景div作为模式本身的父节点，占据整个页面的高度和宽度。把它做成黑色的，有一定的不透明度，这样就会有 "暗淡 "的效果。(请注意，你可能会想做一些类似于 background-color: rgba(0, 0, 0, 0.7) 而不是给背景本身一个不透明度，这样模态就不透明了）。)
2. 要使模态居中，请遵循这个经典建议。https:/css-tricks.comquick-css-trick-how-to-center-an-object-exactly-in-the-center。
3. 要想让关闭按钮在标题中的位置正确，请尝试将标题设置为 position:relative (这样你就可以把它的子代绝对地相对于它定位)和关闭按钮。position: absolute，可能 right: 0; top: 0 或根据需要。

Answer 2

我的Apps Js中基本上缺少一个导入。我只需要添加。

import "bootstrap/dist/css/bootstrap.min.css";

一旦我这样做了，模态工作的方式我希望它！