基于ASP.Net Core的React CRUD应用Submit按钮无法触发如何解决

问题排查及修复方案 #

• 提交按钮配置错误：你当前代码里的按钮逻辑完全混乱，Cancel和Save按钮写在了同一个<Button>标签内，且没有为提交按钮设置type="submit"属性，Form绑定的onSubmit事件只能被类型为submit的按钮触发，你现在没有符合要求的提交按钮，自然无法触发提交逻辑。
  修正后的按钮代码示例：

  <Button type="button" onClick={() => this.setState({ newSaleModal: false })}>取消</Button>
  <Button type="submit" color="green">保存</Button>
  

• 受控组件属性冲突：日期输入框同时设置了value和defaultValue属性，React中受控组件只能二选一，如果你要用受控模式（配合onChange更新state），请删除defaultValue属性，否则会导致组件值异常，提交时无法拿到正确数据。
• 弹窗控制变量写错：Cancel按钮的点击事件里修改的是newCustomerModal，但当前新增销售弹窗的显隐是由newSaleModal控制的，变量名写错会导致点击取消无法正常关闭弹窗。
• 事件this指向问题：请确认你的addSale方法是否已经绑定了正确的this指向，如果是class组件未做绑定，触发onSubmit时会抛出undefined错误。你可以在constructor里绑定，或者直接把addSale定义为箭头函数：

  addSale = (e) => {
    e.preventDefault()
    // 此处写你的提交逻辑
  }
  

• 标签遗漏闭合问题：你贴出的代码里没有看到</Form>闭合标签，请检查完整代码是否有遗漏闭合，遗漏标签也会导致表单事件无法正常触发。

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