[英]Opening React Modal change sorting order of MDBDataTable
我在我的reactjs
項目中使用MDBDataTableV5
數據表。 當我單擊查看按鈕時,模式打開並自動更改我的表格行順序。
我是 ReactJs 的新手,無法識別問題。 可能是這個問題來自使用setState
function。
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 正在更新父 state,這會導致這兩個組件都重新呈現。
請參閱此相關問題以了解處理此問題的方法。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.