React中点击复选框后如何获取数据并提交至后端？

要实现这个功能，核心是把选中状态的管理从子组件提升到父组件，这样父组件就能统一收集所有选中的卡片数据。下面是具体的修改步骤和代码：

核心思路 #

• 父组件CardsList维护一个存储选中卡片数据的状态
• 给子组件CardItem传递两个关键属性：当前卡片是否被选中的状态，以及触发选中/取消选中的回调函数
• 点击Add按钮时，直接用父组件中存储的选中数据构造请求体，提交到后端

修改后的完整代码 #

CardsList.js #

import { useState } from 'react';
import axios from 'axios';
import CardItem from './CardItem';

const CardsList = ({ fetchedApi }) => {
  // 存储选中的卡片数据
  const [selectedCards, setSelectedCards] = useState([]);

  // 处理子组件的选中/取消选中事件
  const handleCardSelect = (cardData) => {
    setSelectedCards(prev => {
      // 判断当前卡片是否已在选中列表中
      const isAlreadySelected = prev.some(item => item.apiSource === cardData.source);
      if (isAlreadySelected) {
        // 已选中则移除
        return prev.filter(item => item.apiSource !== cardData.source);
      } else {
        // 未选中则添加
        return [...prev, { apiSource: cardData.source, apiTarget: cardData.target }];
      }
    });
  };

  const addFlashCards = () => {
    // 直接用选中的卡片数据构造请求体，不再硬编码
    const dataSet = selectedCards;
    if (dataSet.length === 0) {
      console.log('请选择至少一张卡片');
      return;
    }
    const url = "/api/saveToDB";
    axios
      .post(url, { data: dataSet, user: "SOME USER" })
      .then((res) => {
        const fetchedData = res.data;
        console.log(fetchedData);
        // 提交成功后可以清空选中状态
        setSelectedCards([]);
      })
      .catch((err) => console.error(err));
  };

  return (
    <div className="cards-list">
      <button onClick={addFlashCards}>Add</button>
      <ul className="cards-list__list">
        {fetchedApi.map((api) => {
          // 判断当前卡片是否被选中，传递给子组件
          const isSelected = selectedCards.some(item => item.apiSource === api.source);
          return <CardItem 
            key={api.source} // 一定要加key，避免React渲染问题
            api={api} 
            isSelected={isSelected}
            onSelect={handleCardSelect}
          />;
        })}
      </ul>
    </div>
  );
};
export default CardsList;

CardItem.js #

const CardItem = ({ api, isSelected, onSelect }) => {
  const clickedCheckbox = () => {
    // 点击复选框时，通知父组件处理选中状态
    onSelect(api);
  };

  return (
    <li className="card-item">
      {/* 根据父组件传递的isSelected设置复选框的checked状态 */}
      <input 
        className="fiszkiBox" 
        type="checkbox" 
        onClick={clickedCheckbox}
        checked={isSelected}
      />
      <div className="flip-card">
        <div className="flip-card-inner">
          <div className="flip-card-front">
            <p id="api-source">{api.source}</p>
          </div>
          <div className="flip-card-back">
            <p className="api-target">{api.target}</p>
          </div>
        </div>
      </div>
    </li>
  );
};
export default CardItem;

关键细节说明 #

1. 状态提升：把原本在CardItem里的isChosenCard状态移到父组件的selectedCards数组中，让父组件统一管理所有选中数据，避免子组件状态分散导致的数据同步问题。
2. 回调通信：子组件通过父组件传递的onSelect回调，把当前卡片数据传给父组件，由父组件负责添加或移除选中项，实现父子组件的状态同步。
3. 复选框状态同步：子组件的复选框checked属性由父组件的isSelected控制，确保UI显示和实际选中状态完全一致。
4. 提交前校验：添加了选中数据为空的判断，避免提交空数据到后端。

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