ReactJS如何过滤Props以实现渲染？附json-server数据输入过滤场景

我来帮你搞定这个输入框过滤的需求，下面是调整后的完整代码，以及关键步骤的说明：

import React from 'react';
import axios from 'axios';

class AppRouter extends React.Component {
  // 新增filterText状态用于存储输入框的过滤文本
  state = {
    employeeCurrent: [],
    employee: [],
    filterText: ''
  };

  componentDidMount() {
    axios
      .get("http://127.0.0.1:3004/employee")
      // 修正axios then的空格问题
      .then(response => this.setState({ employee: response.data }));
  }

  // 处理输入框变化的方法，更新filterText状态
  handleFilterChange = (e) => {
    this.setState({ filterText: e.target.value });
  };

  add = name => {
    this.setState(prevState => {
      const copy = prevState.employeeCurrent.slice();
      copy.push(name); // 补全你之前未完成的push逻辑
      return { employeeCurrent: copy };
    });
  };

  render() {
    // 核心过滤逻辑：根据输入的关键词过滤员工数组
    const filteredEmployees = this.state.employee.filter(employee => {
      // 转为小写实现不区分大小写的模糊匹配，提升用户体验
      return employee.name.toLowerCase().includes(this.state.filterText.toLowerCase());
    });

    return (
      <div>
        {/* 添加过滤输入框 */}
        <input
          type="text"
          placeholder="输入名称过滤..."
          value={this.state.filterText}
          onChange={this.handleFilterChange}
        />

        {/* 渲染过滤后的员工名称列表 */}
        <ul>
          {filteredEmployees.map(employee => (
            <li key={employee.id}>{employee.name}</li>
          ))}
        </ul>
      </div>
    );
  }
}

export default AppRouter;

关键细节说明： #

• 新增过滤状态：添加filterText状态来同步输入框的内容，确保输入和状态实时联动
• 输入框事件绑定：通过handleFilterChange方法监听输入变化，实时更新过滤关键词
• 模糊匹配逻辑：用toLowerCase()统一转换为小写，实现不区分大小写的过滤，用户输入大写或小写都能精准匹配
• 渲染过滤结果：直接遍历过滤后的filteredEmployees数组，页面只会展示符合条件的员工名称

这样修改后，你就能通过输入框实时筛选页面上的员工名称啦～

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