React中如何点击子组件内的按钮后才将父组件数据传递给子组件

嘿，我明白你的需求了——你想在点击ExpenseDelete里的删除按钮时，把ExpenseItem的props.pk传给子组件来处理删除操作对吧？其实不用纠结“点击后才传递数据”，咱们换个思路，利用React的回调函数就能优雅解决这个问题，让我一步步给你讲怎么改：

第一步：给子组件ExpenseDelete添加回调props #

我们需要让子组件能通知父组件“按钮被点击了”，所以给ExpenseDelete接收一个onDelete的函数props，在按钮提交时调用它：

修改ExpenseDelete.js：

import "./ExpenseDelete.css";

// 接收父组件传过来的删除回调
const ExpenseDelete = (props) => {
  const handleSubmit = (e) => {
    e.preventDefault(); // 阻止表单默认的页面跳转行为
    props.onDelete(); // 触发父组件的删除逻辑
  };

  return (
    <form onSubmit={handleSubmit}>
      <button className="delete-button" type="submit">
        Delete
      </button>
    </form>
  );
};

export default ExpenseDelete;

第二步：在父组件ExpenseItem中传递带数据的回调 #

接下来在ExpenseItem里，我们把包含props.pk的删除逻辑作为onDelete传给子组件。这里可以直接把pk绑定到回调里，也可以先定义一个专门的处理函数：

修改ExpenseItem.js（顺便帮你修正了拼写错误：ExpesneDate改成ExpenseDate）：

import "./ExpenseItem.css";
import ExpenseDate from "./ExpenseDate";
import Card from "../UI/Card";
import ExpenseDelete from "./ExpenseDelete";

const ExpenseItem = (props) => {
  // 定义删除处理函数，这里可以写你实际的删除逻辑
  const handleDelete = () => {
    console.log("即将删除的条目pk：", props.pk);
    // 这里可以添加你的具体操作，比如调用后端删除接口、更新父组件状态等
  };

  return (
    <li>
      <Card className="expense-item">
        <ExpenseDate date={props.date} />
        <div className="expense-item__description">
          <h2>{props.title}</h2>
        </div>
        <div className="expense-item__price">${props.amount}</div>
        {/* 把带pk的删除回调传给子组件 */}
        <ExpenseDelete onDelete={handleDelete} />
      </Card>
    </li>
  );
};

export default ExpenseItem;

为啥要这么做？ #

React是单向数据流，子组件不应该主动去“索要”父组件的数据，而是父组件把需要的逻辑（包含数据）通过回调传递给子组件。这样当子组件触发点击事件时，就会调用父组件的函数，自然就能用到父组件的props.pk了，逻辑也更清晰，完全符合React的设计理念。

如果你的删除逻辑需要在更上层的组件处理（比如管理所有账单的列表组件），那你可以把handleDelete继续往上传递，原理是一样的——把回调一层层传下去，直到能处理删除操作的组件就行。

备注：内容来源于stack exchange，提问作者Tylzan