- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我遇到了一个无法正确显示的模态问题。当我单击按钮时,屏幕会变成全灰色,而不显示模式的内容,当我尝试在输入中插入文本时,即使您看不到自己写的内容,我也可以这样做。
这是理解逻辑的代码:
这是我的 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',
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
非常感谢您的帮助
最佳答案
我通过在模态标记中添加 fade={false}
解决了这个问题,它可以显示模态。
关于reactjs - React Modal 未正确显示,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58913379/
我有 Angular 问题 modal service 我的 app.js 包括: angular.module('myApp', ['myApp.test', 'ui.bootstrap','sma
这是模态中模态的示例。 http://foundation.zurb.com/docs/components/reveal.html 关闭子模态后,有什么方法可以返回到相同状态的第一个模态吗?或者,更
我在另一个模态中有一个模态,我设法使内部模态关闭而不影响另一个模态。问题是,当第二个模态关闭时,它会为其自身和第一个模态触发 'hidden.bs.modal' 事件。 Open demo moda
我试图在单击跨度时打开 Bootstrap 模式对话框,我在互联网上搜索了问题的解决方案 Bootstrap 模式 $(...).modal 不是函数 但我发现的唯一解决方案是“将 jQuery 脚本
我收到错误:this.$modal.modal 不是一个函数 我通过 gulp 文件从 wwwroot 文件夹中的 Node_Module 获得了 ng2-bs3-modal。 我的文件夹结构是:
我使用“use-ajax”类在模态中呈现登录表单。我想在不关闭同一模式的情况下处理验证错误。成功登录后,它会正确重定向,但是当发生错误时,它会关闭模式并重定向到登录页面,即用户/登录并在该页面上显示错
我使用的是 5.2.9 版的 Angular 5,我使用的是 ngx-smart-modal,当我打开 Modal 时,它不显示内容并且非常接近顶部并缩小,附加的图像已附加。 const reason
我正在尝试显示模式弹出窗口以显示网格中所选记录的详细信息。在模式弹出窗口中设置每个控件的值后,我尝试打开它但失败。我已在网站母版页中包含了所有必需的引用,但不断收到“对象不支持属性或方法‘模态’”错误
我正在关注这个Tutorial . 这是我的代码(我已经排除了我的表格 HTML): @model IEnumerable @{ Layout = "~/Views/Shared/_Layou
使用 twitter bootstrap 框架进行 Web 应用程序。我正在使用一个模态,其中我调用另一个模态,其中一个模态位于另一个模态之上。目前,如果您单击关闭“x”按钮,它将关闭两个模式窗口。我
是否可以使用 Twitter Bootstrap 在另一个模态中打开一个模态? 我创建了一个模态,并在第一个模态体内放置了一个指向第二个模态的链接和第二个模态的定义。当我单击链接时,第二个模式在第一个
我正在尝试将 Angular 的 Bootstrap 模式传递给在 Angular Masonry Gallery 中单击的图像的 URL。我所拥有的与文档中的演示非常接近,仅做了一些更改。我知道这完
我需要解决这个问题,我的问题是您看到的第一个模态框必须在白色模态框的后面,我该如何更改它们的位置? 这是图片 黑色模态应该在后面,白色模态应该在前面我怎样才能做到这一点?请帮忙谢谢。 这是我专门制作的
我在 Bootstrap 中遇到这些模态问题。我已经为两者设置了不同的 id,但是当按下“更多”按钮时只有第一个出现。第二个按钮没有显示所需的模式。 Something The Team
被这个问题难住了,但也许,只是也许,有人以前遇到过这个问题,可以给我指出正确的方向。 我有一个 JDialog 用于显示长时间运行的任务的进度,我已将其明确创建为具有定义的所有者的模式: prog
我有一个使用 PrimeFaces 3.0.1 在模态对话框上显示的模态 ConfirmDialog。如果 ConfirmDialog 被打开,整个页面都会被锁定,包括 ConfirmDialog 本
因此,我使用这段代码在当前打开的模态窗口中打开另一个模态窗口: Click 发生的情况是,滚动条会重复 500 毫秒。我猜是因为当前模式仍在淡出。然而,它看起来非常不平滑和卡顿。 如果有任何解决此问题
我目前在 Angular 应用程序中使用自定义主题,我需要将一个额外的 css 类附加到“.modal-dialog”容器,它位于 ngb-modal 内部-窗口。 根据文档 (https://ng-
我关注了这个 StackBlitz example加你 ngx-smart-modal window 。 一切都很顺利,除了组件在页面上打开而不是在灯箱模式弹出窗口中打开。 此示例使用 Angular
我想用 bunit 测试模态是否打开。问题是,模态没有被渲染。如何用 bunit 打开一个 blazored modal? 在我的测试组件中创建模态: Hi
我是一名优秀的程序员,十分优秀!