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无法正确显示

2 个答案: