如何清除Material-Table中列筛选单元格的内容？

要实现清除筛选的功能，核心是通过onFilterChanged传入空值来移除对应列的筛选，同时同步清空输入框内容。你需要给TextField绑定状态来管理输入值，具体修改方案如下：

import { useState } from 'react';
// 按需导入你的组件：TextField、InputAdornment、FilterList、Clear、IconButton等

filterComponent: ({ columnDef, onFilterChanged }) => {
    // 用状态维护筛选输入框的值
    const [filterValue, setFilterValue] = useState('');

    // 清除筛选的逻辑
    const handleClear = () => {
        setFilterValue('');
        // 传入空字符串，通知表格移除该列的筛选条件
        onFilterChanged(columnDef.tableData.id, '');
    };

    return (
        <TextField
            value={filterValue}
            onChange={(e) => {
                const val = e.target.value;
                setFilterValue(val);
                onFilterChanged(columnDef.tableData.id, val);
            }}
            InputProps={{
                startAdornment: (
                    <InputAdornment position="start">
                        <FilterList />
                    </InputAdornment>
                ),
                endAdornment: (
                    <InputAdornment position="end">
                        <IconButton onClick={handleClear}>
                            <Clear className={classes.endAdornment} />
                        </IconButton>
                    </InputAdornment>
                ),
            }}
        />
    );
},

关键说明 #

• 新增useState来控制输入框的值，确保清除按钮点击后输入框能同步清空
• 清除按钮点击时，先更新本地状态，再调用onFilterChanged传入空字符串，触发表格的筛选重置
• 如果是类组件开发，把useState换成类的state和setState即可，逻辑完全一致

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