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

【问题标题】：react + mui form onSubmit event not getting calledreact + mui form onSubmit事件没有被调用
【发布时间】：2022-01-03 05:59:39
【问题描述】：

我正在使用 mui box react 组件，组件属性设置为 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>

【问题讨论】：

嘿，所以按钮的 onSubmit 仅在您有 <form/> 组件时才有效。阅读文档以清除它
带有“component="form"”的mui Box组件添加了一个表单组件。当我查看源代码时，我看到的是一个表单元素。

标签： javascript reactjs material-ui

【解决方案1】：

您应该在父元素中添加表单标签，并为其添加 onSubmit 属性，

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

本例中我使用了formik，不过没关系，你应该添加form，或者你可以从按钮中删除type=submit，直接为按钮设置onClick

【讨论】：

【解决方案2】：

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

【讨论】：