React父组件传递handleSubmit函数给子组件出现警告的解决方法

问题描述 #

在将提交数据用的handleSubmit函数作为props传递给子组件时出现警告，相关代码如下：

父组件代码 #

const handleSubmit = (e) => {
  e.preventDefault();
  request(JSON.stringify(staff));
};

<SubmitButton
  loading={loading}
  formValid={errMessage.formValid}
  handleSubmit={handleSubmit}
/>

子组件代码 #

function SubmitButton(formValid, isActive, handleSubmit, loading) {
  return(
    <button
      className={formValid ? `submit ${false ? "active" : " "}` : "disable"}
      type="button"
      onClick={() => handleSubmit()}      // 此处存在问题
      disabled={!formValid}
    > 
      <span>Submit</span>
    </button>
  )
}

核心问题 #

• 子组件未通过对象解构接收props，导致handleSubmit等参数未被正确获取
• 调用handleSubmit时未传递事件对象e，触发相关警告

解决方案 #

1. 修改子组件的props接收方式 #

React组件的props是单一对象，必须通过解构来获取对应属性，替换原来的多参数接收方式：

// 解构props对象，只提取父组件传递的属性
function SubmitButton({ formValid, handleSubmit, loading }) {
  // ...
}

2. 正确传递事件对象给handleSubmit #

handleSubmit函数依赖事件对象e执行preventDefault()，调用时需要传递该参数：

// 方式1：显式传递事件对象
onClick={(e) => handleSubmit(e)}
// 方式2：直接绑定函数（箭头函数无需担心this指向问题）
onClick={handleSubmit}

3. 清理冗余代码（可选） #

子组件中className里的${false ? "active" : " "}永远不会生效，可移除或替换为实际状态判断：

className={formValid ? "submit" : "disable"}

修改后的完整子组件代码 #

function SubmitButton({ formValid, handleSubmit, loading }) {
  return (
    <button
      className={formValid ? "submit" : "disable"}
      type="button"
      onClick={handleSubmit}
      disabled={!formValid}
    >
      <span>Submit</span>
    </button>
  );
}

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