javascript - jQuery 过滤器和效果不适用于 React JS 中的动态数据

问题描述

我正在学习 ReactJs。使用 React Js 工作非常令人兴奋。但是每次我在处理模板中存在的 JavaScript 和 jQuery 时都会遇到很多麻烦。这次我面临的问题是具有 jQuery 搜索过滤器、自动分页等的表格。所有这些 jQuery 效果都适用于静态数据。如果我为表格的行添加动态数据，则 jQuery 效果不起作用。

我附上了上面的图片。第一行是静态的，但第二行和第三行来自数据库。如果您标记，那么您可以看到“+”号在第 2 行和第 3 行不可见。甚至搜索栏也没有显示第 2 行和第 3 行的结果。

import React, { Component } from 'react';
import DatabaseRow from '../components/Database/DatabaseRow';
import axios from 'axios';
class Database extends Component {
    constructor(){
        super()
        this.state={
           getData:[]
        }
    }

    componentDidMount(){
        axios.get('alumni/database')
            .then(response=>{
              console.log(response);
                this.setState({
                    getData:response.data
                })
                
            })
            .catch(error=>{
                console.log(error);
            })
    }


 render() {
        const mydata=this.state.getData;
        const eventDetails=mydata.map((mylist)=>{
        return <DatabaseRow
                        full_name={mylist.full_name}
                        dept={mylist.dept}
                        batch={mylist.batch}
                        faculty={mylist.faculty}
                        b_group={mylist.b_group}
                        occupation={mylist.occupation}
                        address={mylist.address}
                        phone={mylist.phone}
                        email={mylist.email}
                        roll={mylist.roll}
                        passoutyear={mylist.passoutyear}/>
          })
        return (
            <React.Fragment>
                <section class="shadow pb-3" style = {{paddingTop: "7rem"}}>
    <center>
        <h2 class="h2">Alumni Database  </h2>
    </center>
     
</section>
<section style={{marginTop: "5rem", marginBottom: "5rem"}}>
<div className="container">
<table id="responsive-data-table" className="table dt-responsive nowrap table-hover" style={{width:"100%"}}>
  <thead>
    <tr>
      <th>Name</th>
      <th>Department</th>
      <th>Batch</th>
      <th>Faculty</th>
      <th>Blood Group</th>
      <th>Current Position</th>
      <th>Present Address</th>
      <th>Phone</th>
      <th>E-mail</th>
      <th>Roll</th>
      <th>Passout</th>
    </tr>
  </thead>

  <tbody>
  <DatabaseRow
                        full_name="Munna"
                        dept="ICT"
                        batch="BICE18"
                        faculty="FST"
                        b_group="O+"
                        occupation="Student"
                        address="DHAKA"
                        phone="9284721"
                        email="abc@gmail.com"
                        roll="2856239084"
                        passoutyear="2002"/>
    {eventDetails}
  </tbody>
</table>


</div>

</section>
            </React.Fragment>
        );
    }
}

export default Database;

这是我的父组件，子组件是：

import React, { Component } from 'react';

class DatabaseRow extends Component {
    render() {
        return (
            
                <tr>
                    <td>{this.props.full_name}</td>
                    <td>{this.props.dept}</td>
                    <td>{this.props.batch}</td>
                    <td>{this.props.dept}</td>
                    <td>{this.props.b_group}</td>
                    <td>{this.props.occupation}</td>
                    <td>{this.props.address}</td>
                    <td>{this.props.phone}</td>
                    <td>{this.props.email}</td>
                    <td>{this.props.roll}</td>
                    <td>{this.props.passout_year}</td>
              </tr>
          
        );
    }
}

export default DatabaseRow;

数据库 API 没问题。它给出了在 Postman 中验证的结果。我在 index.html 中添加了包含 jQuery 和 cdn 的标签，该文件也在下面给出

    <!DOCTYPE html>
    
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" href="logo.png" />
        <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.22/css/jquery.dataTables.min.css">
          <link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/responsive/2.2.6/css/responsive.dataTables.min.css">
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
          name="description"
          content="Web site created using create-react-app"
        />
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
    
     
        <!-- Material Design for Bootstrap fonts and icons -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
    
        <!-- Material Design for Bootstrap CSS -->
        <link rel="stylesheet" href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css" integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
    
        <link rel="stylesheet" type="text/css" href="assets/css/style.css">
        <title>CONNEXION</title>
    
      </head>
      <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        <!--
          This HTML file is a template.
          If you open it directly in the browser, you will see an empty page.
    
          You can add webfonts, meta tags, or analytics to this file.
          The build step will place the bundled scripts into the <body> tag.
    
          To begin the development, run `npm start` or `yarn start`.
          To create a production bundle, use `npm run build` or `yarn build`.
        -->
        <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
        <script >
          jQuery(document).ready(function() {
          jQuery('#responsive-data-table').DataTable({
            "aLengthMenu": [[20, 30, 50, 75, -1], [20, 30, 50, 75, "All"]],
            "pageLength": 20,
            "dom": '<"row justify-content-between top-information"lf>rt<"row justify-content-between bottom-information"ip><"clear">'
          });
        });
    
        </script>
        <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/popper.js@1.12.6/dist/umd/popper.js" integrity="sha384-fA23ZRQ3G/J53mElWqVJEGJzU0sTs+SvzG8fXVWP+kJQ1lwFAOkcUOysnlKJC33U" crossorigin="anonymous"></script>
        <script src="https://unpkg.com/bootstrap-material-design@4.1.1/dist/js/bootstrap-material-design.js" integrity="sha384-CauSuKpEqAFajSpkdjv3z9t8E7RlpJ1UP0lKM/+NdtSarroVKu069AlsRPKkFBz9" crossorigin="anonymous"></script>
        <script>$(document).ready(function() { $('body').bootstrapMaterialDesign(); });</script>
        <script src="assets/js/custom.js"></script>
        <script src="https://cdn.datatables.net/1.10.22/js/jquery.dataTables.min.js"></script> 
        <script src="https://cdn.datatables.net/responsive/2.2.6/js/dataTables.responsive.min.js"></script>
        
    
      </body>
    </html>

如果有人感兴趣，请看看这个问题。非常感谢

标签： javascriptjqueryreactjsfilter

javascript - jQuery 过滤器和效果不适用于 React JS 中的动态数据

问题描述

解决方案

推荐阅读