react + mui form onSubmit事件没有被调用

Question

我正在使用 mui 框反应组件，其中组件属性设置为 form，onSubmit 设置为我需要触发的提交处理程序。 我在表单末尾有一个提交按钮。 每当我单击提交按钮时，似乎表单正在提交一个获取请求，因为我在查询字符串中看到了表单字段，但我没有看到提交处理程序被调用。 我在处理程序中添加了 e.preventDefault() 并添加了一个 console.log 和一个调试器语句，但都没有达到。 此外，我在 textFields 上的 onChange 处理程序也没有被调用。 什么可能导致这种情况发生？

处理程序：

const submitForm = (e) => {
    e.preventDefault();
    console.log('We made it to the expected place.');
    debugger;
  }

形式：

<div>
        <div className="w-100">
          <Container>
            <h1 className="text-center">Login</h1>
            <Box className="card loginUI" component="form" autoComplete="off" onSubmit={submitForm}>
              <div className="card-body">
                <div className="formFlexContainer">
                  <div className="formInput">
                    <TextField className="w-100" id="userName" label="Username" variant="standard" name="userName" onChange={e => {console.log('text change 1'); setUsername(e.target.value)}}/>
                  </div>
                  <div className="formInput">
                    <TextField className="w-100" id="password" label="Password" variant="standard" name="password" onChange={e => {console.log('text change 2'); setPassword(e.target.value)}}/>
                  </div>
                  <div className="formInput d-flex justify-content-end">
                    <Button type="submit">
                      Login
                    </Button>
                  </div>
                </div>
              </div>
            </Box>
          </Container>
        </div>
      </div>

Answer 1

您应该在父元素中添加表单标签，然后添加 onSubmit 属性，

<form onSubmit={formik.handleSubmit}>
...
</form>

在这种情况下，我使用了formik，但没关系，你应该添加表单，或者你可以从按钮中删除type=submit并直接为按钮设置onClick

Answer 2

我在这个 stackoverflow 链接上找到了解决方案： js events not fire in webpack built react application 。 问题是对默认情况下 webpack 已经添加的 bundle.js 文件的额外引用。 删除并且事件开始起作用。