React表单input设置required属性后仍可提交空输入的原因是什么？

问题原因 #

导致required属性失效的核心原因如下：

• 你在提交逻辑中调用了e.preventDefault()，直接阻止了表单的原生提交流程。HTML原生的required属性校验是浏览器在表单默认提交阶段执行的，跳过默认流程后校验逻辑自然不会触发，无论输入框是否为空，你后续的提交代码都会正常执行。
• 次要可能原因：当前input标签没有被包裹在<form>标签内，原生表单校验规则无法关联到该输入框。
• 边缘可能原因：changeDescriptionHandler方法逻辑异常，无法将输入框的内容同步到this.state.description，但从你给出的代码片段来看该情况概率较低。

修复方案 #

你可以选择以下任意一种方案修复问题：

1. 主动触发表单原生校验
   给表单标签添加ref，提交前调用原生校验方法判断是否符合规则：

// 表单标签添加ref
<form ref={el => this.formRef = el} onSubmit={this.saveCasefile}>
  <input placeholder="Description" type='text' name="description" className="form-control" value={this.state.description} onChange={this.changeDescriptionHandler} required />
  {/* 其他表单元素 */}
</form>

// 提交方法新增校验判断
saveCasefile = (e) => {
  e.preventDefault();
  // 校验不通过直接终止逻辑
  if (!this.formRef.checkValidity()) return

  let patient = { name: this.state.name, birthDate: this.state.birthDate, gender: this.state.gender }
  let casefile = { description: this.state.description, patient: patient };
  CaseFilesService.createCasefile(casefile).then(res => {
    this.props.history.push('/');
  })
}

2. 手动实现自定义校验
   提交前直接判断description是否为空，灵活性更高：

saveCasefile = (e) => {
  e.preventDefault();
  // 去空后判断是否为空
  if (!this.state.description.trim()) {
    alert('请填写描述信息')
    return
  }

  let patient = { name: this.state.name, birthDate: this.state.birthDate, gender: this.state.gender }
  let casefile = { description: this.state.description, patient: patient };
  CaseFilesService.createCasefile(casefile).then(res => {
    this.props.history.push('/');
  })
}

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