React子组件表单提交时父组件提交函数未触发问题求助

核心问题分析 #

1. 未定义变量导致渲染异常：子组件中多处使用alertType变量，但该变量从未定义，实际应该使用从state解构的type，这会导致条件渲染失效，表单结构不完整。
2. 提交按钮提前关闭模态框：提交按钮同时绑定了onClick={handleClose}，点击时会先关闭模态框（组件卸载），导致表单的onSubmit事件无法正常触发父组件的处理函数。
3. 表单值获取方式错误：父组件中直接从e.target取amount和type，但这些是DOM元素，需要获取其.value属性才能拿到实际输入值。

具体修复步骤 #

1. 修复子组件的变量错误

将子组件中所有alertType替换为type（render函数中已从state解构出该变量）：

// 修改前
{
  alertType === 'price' ?
  <span>...</span> : <span></span>
}
// 修改后
{
  type === 'price' ?
  <span>...</span> : <span></span>
}

// 修改前
{
  alertType === 'amount' ?
  <span>...</span> : <span></span>
}
// 修改后
{
  type === 'amount' ?
  <span>...</span> : <span></span>
}

2. 移除提交按钮的onClick绑定，移到父组件处理

子组件中提交按钮去掉onClick={handleClose}：

<Button type="submit" variant="primary">Submit</Button>

在父组件的alert函数执行完成后调用关闭模态框的方法：

alert = (e) => {
  e.preventDefault()
  const { type, price, amount } = e.target;
  // 根据选择的类型获取对应的值
  const alertValue = type.value === 'price' ? price.value : amount.value;
  const alert = { 
    name: this.props.name, 
    value: alertValue, 
    type: type.value 
  };
  console.log(alert);
  addAlert(alert);
  // 提交完成后关闭模态框
  this.hideCreateAlertModal();
}

3. 修正表单元素的name属性（避免重名）

子组件中价格对应的输入框name改为price，避免和金额类型的输入框重名：

// 价格类型输入框
<Form.Control className="modalInput" name="price" id="price" size="sm" type="text" placeholder="1.22" />
// 金额类型输入框保持name="amount"
<Form.Control className="modalInput" name="amount" id="amount" size="sm" type="text" placeholder="300" />

4. 确认组件命名一致性

子组件类名为Alert，但父组件调用的是CreateAlert，确保导入导出时命名匹配：

• 子组件导出：export default CreateAlert;（修改类名为CreateAlert）
• 或父组件导入：import Alert as CreateAlert from './path/to/Alert';

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