React表格onKeyUp筛选失效及WEBPACK_IMPORTED_MODULE报错求助

问题根源 #

1. 导入方式不匹配：search.js使用export default导出函数，但index.js采用命名导入{ myFunction }，导致React无法识别该函数，触发TypeError报错。
2. 事件绑定错误：若写成onKeyUp={myFunction()}，会在组件渲染时立即执行函数，而非按键时触发；同时因导入错误，直接抛出报错。
3. 原生DOM操作逻辑本身无错，但不符合React最优写法，不过先解决核心的导入与绑定问题让功能正常运行。

修复步骤 #

步骤1：修正函数导入方式 #

修改index.js中的导入语句，因search.js是默认导出，需去掉花括号：

import NavBar from '../components/navbar.js';
import BSSDTable from '../components/bssd.js';
import React from 'react';
// 修正导入：使用默认导入，去掉花括号
import myFunction from '../components/search.js'

export default function Recommend() {
    return (
    <>
        <NavBar />
        <div className="flex justify-between text-center pt-5 pb-5">
        {/* 保持onKeyUp={myFunction}，不要加括号 */}
        <input type="text" id="myInput" onKeyUp={myFunction} placeholder="Enter Class Code" 
        className="input input-bordered w-full max-w-[10rem]" />

        <select className="select w-full max-w-[10rem]">
            <option>Select degree...</option>
            <option>BSSD</option>
            <option>BSCS</option>
        </select>
        </div>
        <BSSDTable />
    </>
    )
}

步骤2：修正表格列获取逻辑 #

原search.js仅获取<td>元素，但表格数据行第一列是<th>，会导致过滤逻辑失效，修改如下：

export default function myFunction() {
    var input, filter, table, tr, i, txtValue;
    input = document.getElementById("myInput");
    filter = input.value.toUpperCase();
    table = document.getElementById("myTable");
    tr = table.getElementsByTagName("tr");
  
    for (i = 0; i < tr.length; i++) {
      // 修正：获取每一行的第一列，兼容<th>和<td>
      const firstCol = tr[i].querySelector("th, td");
      if (firstCol) {
        txtValue = firstCol.textContent || firstCol.innerText;
        if (txtValue.toUpperCase().indexOf(filter) > -1) {
          tr[i].style.display = "";
        } else {
          tr[i].style.display = "none";
        }
      }
    }
}

可选：改用React状态管理（更符合React范式） #

原生DOM操作易引发组件重渲染后状态丢失问题，推荐用状态管理实现过滤：

1. 修改Recommend组件，维护搜索状态：

import NavBar from '../components/navbar.js';
import BSSDTable from '../components/bssd.js';
import React, { useState } from 'react';

export default function Recommend() {
    const [searchQuery, setSearchQuery] = useState('');

    const handleSearch = (e) => {
        setSearchQuery(e.target.value.toUpperCase());
    };

    return (
    <>
        <NavBar />
        <div className="flex justify-between text-center pt-5 pb-5">
        <input 
            type="text" 
            onKeyUp={handleSearch} 
            onChange={handleSearch} // 实时响应输入
            placeholder="Enter Class Code" 
            className="input input-bordered w-full max-w-[10rem]" 
        />

        <select className="select w-full max-w-[10rem]">
            <option>Select degree...</option>
            <option>BSSD</option>
            <option>BSCS</option>
        </select>
        </div>
        {/* 传递搜索状态给表格组件 */}
        <BSSDTable searchQuery={searchQuery} />
    </>
    )
}

2. 修改bssd.js，接收搜索状态并过滤数据：

import React from 'react';

// 抽离表格数据为数组，方便过滤
const tableData = [
    { code: 'C455', name: 'English Composition 1', difficulty: 'Easy', recommend: 'Sophia' },
    // 可添加更多数据
];

export default function BSSDTable({ searchQuery }) {
    // 根据搜索词过滤数据
    const filteredData = tableData.filter(item => 
        item.code.toUpperCase().includes(searchQuery)
    );

    return (
        <div className="overflow-x-auto">
            <table className="table w-full text-center">
                <thead>
                <tr>
                    <th>Class Code</th>
                    <th>Class Name</th>
                    <th>Difficulty</th>
                    <th>Recommend</th>
                </tr>
                </thead>
                <tbody>
                {filteredData.map((item, index) => (
                    <tr key={index}>
                        <th>{item.code}</th>
                        <td>{item.name}</td>
                        <td>{item.difficulty}</td>
                        <td>{item.recommend}</td>
                    </tr>
                ))}
                </tbody>
            </table>
        </div>
    );
}

内容的提问来源于stack exchange，提问作者JardoS5