React组件间状态传递问题：子组件无法更新父组件dirty状态

问题根源 #

你当前的代码有两个关键问题：

1. 父组件没有将状态更新函数 setDirty 传递给子组件 AddItemForm，导致子组件中无法访问该函数
2. onChange 事件绑定错误：直接写 onChange={setDirty(true)} 会在组件渲染时立即执行 setDirty，而不是在表单变化时触发

修复步骤 #

1. 父组件传递 setDirty 给子组件

在父组件渲染 AddItemForm 时，新增 setDirty 作为 props 传入：

const [dirty, setDirty] = React.useState(false);
<AddItemForm addItem={addItem} setAddItem={setAddItem} dirty={dirty} setDirty={setDirty} />

2. 子组件接收 setDirty 并修正事件绑定

在子组件中解构出 setDirty，并将 onChange 改为回调函数形式：

const AddItemForm = ({ setAddItem, addItem, dirty, setDirty }) => {
  // 其他逻辑...
  
  return (
    <form id="component-form" onSubmit={onSubmit} onChange={() => setDirty(true)}>
      {/* 表单元素 */}
    </form>
  );
};

原理说明 #

React 中状态是局部所属的，子组件无法直接修改父组件的状态，必须通过父组件传递过来的状态更新函数来完成。这种"状态提升 + 回调传递"的模式是 React 中跨组件状态管理的基础方式，确保状态的流向清晰可追踪。

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