Modal中Formik的onSubmit事件未触发问题排查

嘿，我帮你捋捋这个问题！首先明确说：你完全不需要给phone对应的div添加onChange事件——Formik的Field组件已经自动帮你处理了表单字段的状态同步和onChange逻辑，这点不用额外操心。

你的提交事件没触发，核心问题是代码里存在语法错误，导致Formik的逻辑根本没正常运行：

1. Formik的onSubmit箭头函数未正确闭合：你写的onSubmit={({phone},{ setStatus, setSubmitting }) => { alert("test"); )这里，箭头函数的大括号和外层括号都没闭合，少了一对}}。
2. Formik的render属性语法不完整：render={({ errors, status, touched, isSubmitting }) => (后面的组件结构没有正确闭合对应的括号和标签，导致整个Formik组件逻辑断裂。

我帮你修正了代码，还补充了Formik必须的关键配置，你可以参考：

<Modal 
  show={this.state.testing} 
  onHide={this.onHide} 
  size="lg" 
  aria-labelledby="contained-modal-title-vcenter" 
  centered
>
  <Modal.Header closeButton>
    <Modal.Title id="contained-modal-title-vcenter"> Hello World </Modal.Title>
  </Modal.Header>
  <Formik 
    // 必须设置initialValues，Formik需要初始值才能正常工作
    initialValues={{ phone: "" }}
    onSubmit={({ phone }, { setStatus, setSubmitting }) => { 
      alert("test");
      // 完成逻辑后记得把提交状态设为false，否则按钮会一直禁用
      setSubmitting(false);
    }} 
    render={({ errors, status, touched, isSubmitting }) => (
      <Form>
        <div className="form-group">
          <label htmlFor="phone">phone</label>
          <Field 
            name="phone" 
            type="text" 
            className={`form-control ${errors.phone && touched.phone ? " is-invalid" : ""}`} 
          />
          {/* 可选：添加错误提示 */}
          {errors.phone && touched.phone && <div className="invalid-feedback">{errors.phone}</div>}
        </div>
        <button type="submit" className="btn btn-primary" disabled={isSubmitting}>Update</button>
      </Form>
    )}
  />
</Modal>

另外再提两个容易忽略的Formik要点：

• 一定要给Formik设置initialValues，这是Formik跟踪表单状态的基础，没有它很多功能都会失效。
• 在onSubmit逻辑执行完后，记得调用setSubmitting(false)，不然提交按钮会一直保持禁用状态，无法再次触发提交。

修正这些问题后，你的提交按钮点击时应该就能正常弹出alert("test")了！

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