ReactJS中点击复选框无需重载获取数据的实现方法

核心实现逻辑 #

通过React状态跟踪选中的复选框值，当复选框状态变更时，实时过滤JSON数据并渲染结果，全程无需页面刷新或提交操作，和你提到的react-icon实时加载逻辑一致。

分步实现代码 #

1. 状态初始化
   使用useState维护选中的类型集合，以及从JSON加载的原始数据（这里用模拟数据演示，实际项目中可通过fetch或axios加载本地JSON文件）。

2. 复选框事件处理
   给每个复选框绑定onChange事件，切换对应类型的选中状态，更新状态数组。

3. 实时过滤数据
   根据当前选中的类型，过滤原始数据，只保留匹配条件的条目。

完整示例代码 #

import { useState, useEffect } from 'react';

// 模拟JSON数据（实际可替换为fetch('./data.json')加载）
const mockData = [
  { id: 1, type: 'Bike', name: '山地自行车' },
  { id: 2, type: 'Bike', name: '公路自行车' },
  { id: 3, type: 'car', name: '家用轿车' },
  { id: 4, type: 'car', name: 'SUV' },
];

function DataFilter() {
  // 保存选中的类型集合
  const [selectedTypes, setSelectedTypes] = useState([]);
  // 保存原始数据
  const [data, setData] = useState([]);

  // 模拟加载JSON数据
  useEffect(() => {
    setData(mockData);
    // 实际项目中替换为：
    // fetch('./your-data.json')
    //   .then(res => res.json())
    //   .then(jsonData => setData(jsonData));
  }, []);

  // 处理复选框选中/取消
  const handleCheckboxChange = (e) => {
    const { value, checked } = e.target;
    setSelectedTypes(prev => {
      if (checked) {
        return [...prev, value];
      } else {
        return prev.filter(type => type !== value);
      }
    });
  };

  // 过滤数据：如果没有选中任何类型，显示全部；否则显示匹配的条目
  const filteredData = selectedTypes.length === 0 
    ? data 
    : data.filter(item => selectedTypes.includes(item.type));

  return (
    <div>
      <h1>Please select a type</h1>
      <div>
        <input 
          type="checkbox" 
          id="Bike" 
          name="Bike" 
          value="Bike"
          onChange={handleCheckboxChange}
          checked={selectedTypes.includes('Bike')}
        />
        <label htmlFor="Bike">Bike</label>
      </div>
      <div>
        <input 
          type="checkbox" 
          id="car" 
          name="car" 
          value="car"
          onChange={handleCheckboxChange}
          checked={selectedTypes.includes('car')}
        />
        <label htmlFor="car">Car</label>
      </div>

      <h2>Filtered Results</h2>
      <ul>
        {filteredData.map(item => (
          <li key={item.id}>{item.name} ({item.type})</li>
        ))}
      </ul>
    </div>
  );
}

export default DataFilter;

关键说明 #

• 状态更新：通过setSelectedTypes实时维护选中的类型，确保状态变更触发组件重新渲染
• 数据过滤：每次状态更新后，filteredData会自动重新计算，实现实时渲染
• 复选框状态同步：给复选框添加checked属性，确保UI和状态保持一致

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