React Modal 没有正确显示

Question

我遇到了无法正确显示的模式问题。当我点击按钮时，屏幕变成灰色，没有显示模态的内容，当我尝试在输入中插入文本时，即使您看不到您写的内容，我也可以这样做。

下面是理解逻辑的代码：

https://medium.com/@olinations/build-a-crud-template-using-react-bootstrap-express-postgres-9f84cc444438

还有我的 App.js（List.js 在那种情况下）代码：

import React, { Component } from "../../../node_modules/react";
    import { Container, Row, Col } from "reactstrap";
    import ModalForm from "../../Components/Modals/Modal";
    import DataTable from "../../Components/Tables/DataTable";
    import { CSVLink } from "react-csv";
    
    class List extends Component {
      state = {
        items: []
      };
    
      getList = () => {
        fetch("http://localhost:5000/api/azienda")
          .then(res => res.json())
          .then(items => this.setState({ items }))
          .catch(err => console.log(err));
      };
    
      addItemToState = item => {
        this.setState(prevState => ({
          items: [...prevState.items, item]
        }));
      };
    
      updateState = item => {
        const itemIndex = this.state.items.findIndex(data => data.id_azienda === item.id);
        const newArray = [
          // destructure all items from beginning to the indexed item
          ...this.state.items.slice(0, itemIndex),
          // add the updated item to the array
          item,
          // add the rest of the items to the array from the index after the replaced item
          ...this.state.items.slice(itemIndex + 1)
        ];
        this.setState({ items: newArray });
      };
    
      deleteItemFromState = id => {
        const updatedItems = this.state.items.filter(item => item.id_azienda !== id);
        this.setState({ items: updatedItems });
       // console.log(id)
      };
    
      componentDidMount() {
        this.getList();
      }
      render() {
        return (
          <Container className="App">
            <Row>
              <Col>
                <h1 style={{ margin: "20px 0" }}>CRUD Database</h1>
              </Col>
            </Row>
            <Row>
              <Col>
                <DataTable
                  items={this.state.items}
                  updateState={this.updateState}
                  deleteItemFromState={this.deleteItemFromState}
                />
              </Col>
            </Row>
            <Row>
              <Col>
                <CSVLink
                  filename={"db.csv"}
                  color="primary"
                  style={{ float: "left", marginRight: "10px" }}
                  className="btn btn-primary"
                  data={this.state.items}
                >
                  Download CSV
                </CSVLink>
                <ModalForm
                  buttonLabel="Aggiungi"
                  addItemToState={this.addItemToState}
                />
              </Col>
            </Row>
          </Container>
        );
      }
    }
    
    export default List;

DataTable.js :

import React, { Component } from 'react'
import { Table, Button } from 'reactstrap';
import ModalForm from '../Modals/Modal'

class DataTable extends Component {
  
  
    deleteItem = id_azienda => {
     
      let confirmDelete = window.confirm('Vuoi Eliminarlo Definitivamente?')
        if(confirmDelete){
         
          fetch('http://localhost:5000/api/azienda', {
          method: 'delete',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            id_azienda
          })
          
        })
          .then(response => response.json())
          .then(item => {
            this.props.deleteItemFromState(id_azienda)
            console.log(item)
          })
          
          .catch(err => console.log(err))
        }
        console.log(id_azienda)
      }

      
  render() {

    const items = this.props.items.map(item => {
      return (
        <tr key={item.id_azienda}>
          <th scope="row">{item.id_azienda}</th>
          <td>{item.nome_azienda}</td>
          <td>{item.tipo}</td>
          <td>
            <div style={{width:"110px"}}>
              <ModalForm buttonLabel="Modifica" item={item} updateState={this.props.updateState}/>
              {' '}
              <Button color="danger" onClick={() => this.deleteItem(item.id_azienda)}>Elimina</Button>
            </div>
          </td>
        </tr>
        )
      })

    return (
      <Table responsive hover>
        <thead>
          <tr>
            <th>ID</th>
            <th>Nome Azienda</th>
            <th>Tipo Azienda</th>
          </tr>
        </thead>
        <tbody>
          {items}
        </tbody>
      </Table>
    )
  }
}

export default DataTable;

Modal.js :

import React, { Component } from 'react'
import { Button, Modal, ModalHeader, ModalBody } from 'reactstrap'
import AddEditForm from '../Forms/AddEditForm'


class ModalForm extends Component {
    constructor(props) {
        super(props)
        this.state = {
          modal: false
        }
      }

      toggle = () => {
        this.setState(prevState => ({
          modal: !prevState.modal
        }))
      }
    
      
  render() {
    const closeBtn = <button className="close" onClick={this.toggle}>&times;</button>

    const label = this.props.buttonLabel

    let button = ''
    let title = ''

    if(label === 'Modifica'){
      button = <Button
                color="warning"
                onClick={this.toggle}
                style={{float: "left", marginRight:"10px"}}>{label}
              </Button>
      title = 'Edit Item'
    } else {
      button = <Button
                color="success"
                onClick={this.toggle}
                style={{float: "left", marginRight:"10px"}}>{label}
              </Button>
      title = 'Add New Item'
    }


    return (
    <div>
      {button}
      <Modal isOpen={this.state.modal} toggle={this.toggle} className={this.props.className}>
          <ModalHeader toggle={this.toggle} close={closeBtn}>{title}</ModalHeader>
          <ModalBody>
            <AddEditForm
              addItemToState={this.props.addItemToState}
              updateState={this.props.updateState}
              toggle={this.toggle}
              item={this.props.item} />
          </ModalBody>
        </Modal>
    </div>
  )
}
}

export default ModalForm;

和我的 AddEditForm.js :

import React,{Component} from 'react';
import { Button, Form, FormGroup, Label, Input,ModalFooter } from 'reactstrap';


class AddEditForm extends Component {
    state = {
      id_azienda: 0,
      nome_azienda: '',
      tipo: ''
    }
  
    onChange = e => {
      this.setState({[e.target.name]: e.target.value})
    }
  
    submitFormAdd = e => {
      e.preventDefault()
      fetch('http://localhost:5000/api/azienda', {
        method: 'post',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            nome_azienda: this.state.nome_azienda,
            tipo: this.state.tipo
        })
      })
        .then(response => response.json())
        .then(item => {
          if(Array.isArray(item)) {
            this.props.addItemToState(item[0])
            this.props.toggle()
          } else {
            console.log('failure Add data')
          }
        })
        .catch(err => console.log(err))
    }
  
    submitFormEdit = e => {
      e.preventDefault()
      fetch('http://localhost:5000/api/azienda', {
        method: 'put',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          id_azienda: this.state.id_azienda,
          nome_azienda: this.state.nome_azienda,
          tipo: this.state.tipo
        })
      })
        .then(response => response.json())
        .then(item => {
          if(Array.isArray(item)) {
            // console.log(item[0])
            this.props.updateState(item[0])
            this.props.toggle()
          } else {
            console.log('failure edit data')
          }
        })
        .catch(err => console.log(err))
    }
  
    componentDidMount(){
      // if item exists, populate the state with proper data
      if(this.props.item){
        const { id_azienda, nome_azienda, tipo } = this.props.item
        this.setState({ id_azienda, nome_azienda, tipo })
      }
    }
  
    render() {
      return (
        <Form onSubmit={this.props.item ? this.submitFormEdit : this.submitFormAdd}>
          <FormGroup>
            <Label for="nome_azienda">Nome Azienda</Label>
            <Input type="text" name="nome_azienda" id="nome_azienda" onChange={this.onChange} value={this.state.nome_azienda === null ? '' : this.state.nome_azienda} />
          </FormGroup>
          <FormGroup>
            <Label for="tipo">Tipo Azienda</Label>
            <Input type="text" name="tipo" id="tipo" onChange={this.onChange} value={this.state.tipo === null ? '' : this.state.tipo}  />
          </FormGroup>
          <ModalFooter>
          <Button>Submit</Button>
          </ModalFooter>
        </Form>
      );
    }
  }
  
  export default AddEditForm

非常感谢您的帮助

Answer 1

我通过在模态标签中添加 fade={false} 解决了这个问题，它可以显示模态。

Answer 2

我在 css 中添加了 display:block 行，问题已解决。

React Modal 没有正确显示

React Modal doesn't show up correctly

crud

reactjs

react-modal

reactstrap

react-table