我在模态模式中无法正常显示问题，当我单击按钮时，屏幕变为灰色，而没有显示模态内容，当我尝试在输入中插入文本时即使您看不到自己写的内容，也要这样做。

这是理解逻辑的代码：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 (
          
            
              
                
CRUD Database
              
            
            
              
                
              
            
            
              
                
                  Download CSV
                
                
              
            
          
        );
      }
    }

    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 (
        
          {item.id_azienda}
          {item.nome_azienda}
          {item.tipo}
          
            

              
              {' '}
               this.deleteItem(item.id_azienda)}>Elimina
            
          
        
        )
      })

    return (
      
          {items}
        

        

          

            
ID
            
Nome Azienda
            
Tipo Azienda
          
        
        

      
    )
  }
}

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 = ×

    const label = this.props.buttonLabel

    let button = ''
    let title = ''

    if(label === 'Modifica'){
      button = {label}
              
      title = 'Edit Item'
    } else {
      button = {label}
              
      title = 'Add New Item'
    }


    return (
    

      {button}
      
          {title}
          
            
          
        
    
  )
}
}

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 (
        

          
            Nome Azienda
            
          
          
            Tipo Azienda
            
          
          
          Submit
          
        
      );
    }
  }

  export default AddEditForm

等待您的回复

非常感谢您的帮助 ：）