reactjs - 打开React Modal改变MDBDataTable的排序顺序
问题描述
我MDBDataTableV5
在我的reactjs
项目中使用数据表。当我单击查看按钮时,模式打开并自动更改我的表格行顺序。
我是 ReactJs 的新手,无法识别问题。可能是这个问题来自使用setState
功能。
import React, { Component } from 'react';
import { Container, Row, Col, Card, CardBody, Button, Input, Modal, ModalBody, ModalFooter } from 'reactstrap';
import { activateAuthLayout } from '../../store/actions';
import { Link, withRouter } from 'react-router-dom';
import { connect } from 'react-redux';
import { MDBDataTableV5 } from 'mdbreact';
class Discussion extends Component {
constructor(props) {
super(props);
this.state = {
modalStandard: false,
};
}
toggleModel(id) {
this.setState({
modalStandard: !this.state.modalStandard
});
this.removeBodyCss();
}
removeBodyCss() {
document.body.classList.add('no_padding');
}
componentDidMount() {
this.props.activateAuthLayout();
}
render() {
const data = {
columns: [
{
label: 'Id',
field: 'id',
width: 150
},
{
label: 'Name',
field: 'name',
width: 150
},
{
label: 'Agency',
field: 'agency',
width: 270
},
{
label: 'Date',
field: 'date',
width: 200
},
{
label: 'Action',
field: 'action',
width: 100,
}
],
rows: [
{
id: 22,
name: 'Ashton Cox',
agency: 'Cristiano Autoparts',
date: '2020-05-12',
action: <Button type="button" onClick={() => this.toggleModel('discussionId')} color="info" size="sm"><i className="mdi mdi-chat mr-2 ml-2"></i></Button>
},
{
id: 102,
name: 'Tiger Nixon',
agency: 'Astro Automobiles',
date: '2020-03-12',
action: <Button type="button" onClick={() => this.toggleModel('discussionId')} color="info" size="sm"><i className="mdi mdi-chat mr-2 ml-2"></i></Button>
},
{
id: 52,
name: 'Garrett Winters',
agency: 'DHCR Repair Service',
date: '2018-03-05',
action: <Button type="button" onClick={() => this.toggleModel('discussionId')} color="info" size="sm"><i className="mdi mdi-chat mr-2 ml-2"></i></Button>
}
]
};
return (
<React.Fragment>
<Container fluid>
<div className="page-title-box">
<Row className="align-items-center">
<Col sm="6">
<h4 className="page-title">Discussions</h4>
</Col>
</Row>
</div>
<Row>
<Col>
<Card>
<CardBody>
<Row>
<Col sm="6">
<Input type="text" placeholder="Search by Agency" className="search-input-matrial" />
</Col>
<Col sm="6">
<Input type="text" placeholder="Search by Name" className="search-input-matrial" />
</Col>
</Row>
</CardBody>
</Card>
</Col>
</Row>
<Row>
<Col>
<Card>
<CardBody>
<MDBDataTableV5
responsive
striped
data={data}
searching={false}
onSort={value => console.log(value)}
/>
</CardBody>
</Card>
</Col>
</Row>
<Modal isOpen={this.state.modalStandard} toggle={() => this.toggleModel('discussionId')} >
<div className="modal-header">
<h5 className="modal-title mt-0" id="myModalLabel">Discussion</h5>
<button type="button" onClick={() => this.setState({ modalStandard: false })} className="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<ModalBody>
<div className="chat-conversation">
Body text
</div>
</ModalBody>
<ModalFooter>
<Button type="button" color="secondary" onClick={() => this.toggleModel('discussionId')} className="waves-effect">Close</Button>
<Button type="button" color="primary" className="waves-effect waves-light">Save changes</Button>
</ModalFooter>
</Modal>
</Container>
</React.Fragment>
);
}
}
export default withRouter(connect(null, { activateAuthLayout })(Discussion));
解决方案
问题是您的 Modal 和 MDBDatatable 是兄弟姐妹,而 Modal 正在更新父状态,这会导致这两个组件都重新呈现。
请参阅此相关问题以了解处理此问题的方法。
推荐阅读
- javascript - 异步代码在 JavaScript 的底层是如何真正工作的?
- spring-integration - 自定义消息错误:消息因 XML 验证错误而被拒绝;嵌套异常是
- hive - 插入覆盖蜂巢表
- c++ - 如何使用 std::filesystem 实现递归目录和文件列表?
- c++ - 这种情况是否需要删除或创建新变量?
- javascript - 在移动设备或 1200px 以下隐藏 Javascript 功能
- javascript - 显示来自 Firestore 的数据时遇到问题
- java - 如何在java中打印值而不是内存位置?
- python - 如何确定两个字符串的相似程度(直到某一点)
- node.js - 将带有 Unix 时间戳的字段转换为日期 (Mongodb/NodeJS)