React中event.preventDefault()无效且控制台无法获取值，请问哪里出错了？

• 核心错误是onSubmit事件的绑定位置有误：原生表单的submit事件只会在<form>元素本身触发，你当前将onSubmit={formSubmissionHandler}绑定到了form内部的div节点上，触发表单提交时处理函数根本不会执行，自然不会运行event.preventDefault()阻止默认跳转，也不会输出控制台日志。
• 额外可优化点：你在提交处理函数中重复声明了和上层state同名的enteredName变量，虽然不会直接导致功能异常，但容易引发作用域混淆，建议修改局部变量名避免冲突。

将onSubmit属性移到<form>标签上即可，修改后的代码片段如下：

return (
  {/* 将onSubmit绑定到form元素上 */}
  <form onSubmit={formSubmissionHandler}>
    <div className="form-control">
      <label htmlFor="name">Your Name</label>
      <input
        ref={nameInputRef}
        type="text"
        id="name"
        onChange={nameInputChangeHandler}
      />
    </div>
    <div className="form-actions">
      <button>Submit</button>
    </div>
  </form>
);

该方案同时兼容按钮点击提交、输入框回车提交两种原生表单交互场景，是最符合规范的实现方式。如果确实需要绑定点击事件到提交按钮上，需要给按钮添加type="button"属性，或者在点击处理函数中也调用event.preventDefault()阻止默认提交行为。

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