如果在ReactJS中验证失败，则文本输入不应失去焦点

Question

在NewFormComponent中，我在第一个输入上具有onBlur，它正在检查fname是否为“”，然后是控制台“验证失败”

要求：文本框在用户输入某些值或通过验证之前不会失去焦点。换句话说，在通过验证之前，用户无法选择或制表相同格式的其他文本字段。

我尝试使用ref并调用focus（）方法，但是它使用文本字段来获得焦点，但是用户仍然可以选择其他文本字段。

import React, { Component } from 'react'

export default class NewFormComponent extends Component {
  constructor(props) {
    super(props)

    this.state = {
       fname:"",
       lname:""
    }

    this.handleChange = this.handleChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  handleChange(e){
      this.setState({
          [e.target.name]:e.target.value
      })
  }
  onFormSubmit(e){
      e.preventDefault();
      console.log(`Hi ${this.state.fname} ${this.state.lname}`)
  }
  render() {
    return (
      <div>
        <form onSubmit={this.onFormSubmit}>
            <input type="text"
                name="fname" 
                value={this.state.fname}
                onChange={this.handleChange}
                onBlur={()=>{
                    if(this.state.fname === ""){
                        console.log("Validation failed");
                    }
                }}
            />
            <input type="text"
             name="lname" 
             value={this.state.lname} 
             onChange={this.handleChange}/>
            <input type="submit" value="submit"/>
        </form>
      </div>
    )
  }
}

期望：文本字段在通过验证之前不会失去焦点