打开React Modal改变MDBDataTable的排序顺序

Posted 2023-03-23

【中文标题】打开React Modal改变MDBDataTable的排序顺序

【英文标题】：Opening React Modal change sorting order of MDBDataTable

【发布时间】：2020-09-24 07:04:28

【问题描述】：

我在我的reactjs 项目中使用MDBDataTableV5 数据表。当我单击查看按钮时，模式打开并自动更改我的表格行顺序。

我是 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">&times;</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));

【参考方案1】：

问题是您的 Modal 和 MDBDatatable 是同级的，而 Modal 正在更新父状态，这会导致这两个组件都重新呈现。

请参阅this related question 了解处理方法。