我遇到模态夹心的问题，无法正确显示，当我单击按钮时，屏幕变灰，而没有显示模态的内容，并且当我尝试在即使您看不到自己写的内容，输入也可以让我做到。
还有我的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}>×</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',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,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
等待您的答复
非常感谢您的帮助：）