如何在React.js的MenuItems组件中实现菜单项搜索功能

实现步骤 #

• 首先补全filteredItem过滤方法，支持模糊匹配、大小写不敏感，搜索词为空时直接返回全部菜单项
• 渲染时用过滤后的列表替代原props里的全量菜单项

完整修改后代码

class MenuItems extends Component {
    state = {
        searchTerm: '',
    }

    handleclick = (item) => {
        this.props.deleteMenuItem(item.id);
    }

    handleSearch = (event) => {
        this.setState({
            [event.target.name]: event.target.value
        })
    }

    // 补全过滤逻辑
    filteredItem = () => {
        const { searchTerm } = this.state;
        const { menuItems } = this.props;
        // 搜索词为空时返回全部数据
        if (!searchTerm.trim()) return menuItems;
        // 统一转小写实现大小写不敏感的模糊匹配
        const lowerCaseTerm = searchTerm.toLowerCase();
        return [...menuItems].filter(item => 
            item.name.toLowerCase().includes(lowerCaseTerm)
        );
    }


    render(){
        // 改用过滤后的列表渲染
        const showItems = this.filteredItem();

        return ( 
            <div>   
                <input 
                    placeholder="search"
                    name="searchTerm"
                    type="text"
                    value={this.state.searchTerm}
                    onChange={this.handleSearch}
                />
                {/* 可选：无匹配结果时展示提示 */}
                {showItems.length === 0 ? (
                    <p>未找到匹配的菜单项</p>
                ) : (
                    showItems.map((item) =>(
                        <li className="list" key={item.id}>
                            {item.name}
                            <br></br>
                            {item.body}
                            <br></br>
                            <img src={item.image} alt={item.name}></img>
                            <br></br>
                            <button id={item.id} onClick={() => this.handleclick(item)}>delete </button>
                        </li>
                    ))
                )}
            </div>
        )
    }
}

export default connect(null, {deleteMenuItem})(MenuItems)

额外调整说明

• 原代码中li标签的class属性改为React规范的className，避免控制台警告
• 给img标签补充了alt属性，符合可访问性要求
• 新增的无匹配结果提示逻辑不需要可以直接删除

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