如何在Reactjs中提交表单后将焦点设置在空输入字段上

我正在尝试一种表单验证，当用户试图提交表单时，它将焦点放在输入字段上，将任何输入字段留空。 预期结果 焦点应该仅在单击submit（在我的例子中是previous或next按钮）按钮后出现，并且仅在空输入字段上出现。 当前结果 无论是否为空，焦点仅显示在最后一个输入字段上

我的代码

class Assistant extends Component {
saveUser = direction => () => {

        const self = this
        const updateInfos = {
            fullname: this.state.user.fullname,
            email: this.state.user.email,
            phone: this.state.user.phone,
            fixedLinePhone: this.state.user.fixedLinePhone,
            jobPosition: this.state.user.jobPosition,
            place: this.state.user.place,
        }

        const userDataModified = JSON.stringify(updateInfos) !== JSON.stringify(this.state.currentUserDataForUpdateCheck)
        console.log(userDataModified);
        /* user data has been modified in the form, so we need to save them */

        // Code to handle validation of the user form
        // console.log("Fullname : ", this.state.user.fullname);
        // return false;
        if (updateInfos.fullname == "" || updateInfos.phone == "" || updateInfos.fixedLinePhone == "" || updateInfos.jobPosition == "" || updateInfos.place == "") {
            console.log("blank is :", this.state.blank);
            const { blank } = this.state;
            if(blank) {
                this.blank.focus();
                console.log("Some input is blank", blank);
            }
            toastr.clear()
            toastr.error(
                self.props.intl.formatMessage({ id: 'form-error-new' }, { inputName: blank }),
                '',
                { closeButton: true }
            )
        } else {
            if (userDataModified) {

                this.setState({
                    loading: true,
                    loadingCounterSemaphore: this.state.loadingCounterSemaphore + 1,
                })

                this.props.editUser(updateInfos).then(data => {

                    const loadingCounterSemaphore = self.state.loadingCounterSemaphore - 1
                    const loading = loadingCounterSemaphore > 0
                    self.setState({
                        loading,
                        loadingCounterSemaphore,
                        user: {
                            ...self.state.user,
                            editMode: false,
                        },
                    })
                    toastr.clear()
                    toastr.success(
                        self.props.intl.formatMessage({ id: 'user-updated' }),
                        '',
                        { closeButton: true }
                    )
                    this.moveToTab(direction === 'next' ? 3 : 1)
                }).catch(err => {
                    const loadingCounterSemaphore = self.state.loadingCounterSemaphore - 1
                    const loading = loadingCounterSemaphore > 0
                    self.setState({
                        loading,
                        loadingCounterSemaphore,
                    })
                    toastr.clear()
                    toastr.error(
                        self.props.intl.formatMessage({ id: 'error-updating-user' }),
                        '',
                        { closeButton: true }
                    )
                })
            } else {
                this.moveToTab(direction === 'next' ? 3 : 1)
            }
        }
    }

    inputChanged = prop => ({ target: { value } }) => {
        let user = this.state.user
        user[prop] = value
        this.setState({ user })
        console.log("Prop is :", prop)
        if (value == "") {
            this.setState({
                blank: prop
            })
        }
    }
render() {
    return (
       <div className="assistant-ctnr">
        <div className="row identity-element">
         <div className="col-md-4">
          <label>
           <FormattedMessage id="on-boarding-profile-tab-fullname-field" />
          </label>
         </div>
        <div className="col-md-8">
         <span>
          <input type="text" className="form-control input-editable-text-field" value={this.state.user.fullname} onChange={this.inputChanged('fullname')} placeholder={this.props.intl.formatMessage({ id: 'profile-fullname-placeholder' })} ref="yourInputBox" />
         </span>
        </div>
       </div>
       <div className="row identity-element">
        <div className="col-md-4 profile-icon-center">
         <label>
          <FormattedMessage id="on-boarding-profile-tab-job-position-field" />
         </label>
        </div>
        <div className="col-md-8">
         <span>
          <input type="text" className="form-control input-editable-text-field" value={this.state.user.jobPosition} onChange={this.inputChanged('jobPosition')} placeholder={this.props.intl.formatMessage({ id: 'profile-job-position-placeholder' })} ref="yourInputBox" />
         </span>
        </div>
       </div>
      </div>

      // The previous and next button submits the form data
      <span className="assistant-button assistant-pointer" onClick={this.saveUser('previous')}>
       <b><FormattedMessage id="assistant-button-previous" /></b>
      </span>
      <span className="assistant-button assistant-button-next assistant-pointer" onClick={this.saveUser('next')}>
       <b><FormattedMessage id="assistant-button-next" /></b>
      </span>
    )
}

类助手扩展组件{
saveUser=direction=>（）=>{
const self=this
常量更新信息={
全名：this.state.user.fullname，
电子邮件：this.state.user.email，
电话：this.state.user.phone，
fixedLinePhone:this.state.user.fixedLinePhone，
jobPosition:this.state.user.jobPosition，
地点：this.state.user.place，
}
const userDataModified=JSON.stringify（updateinfo）！==JSON.stringify（this.state.currentUserDataForUpdateCheck）
console.log（userDataModified）；
/*表单中的用户数据已被修改，因此我们需要保存它们*/
//用于处理用户表单验证的代码
//log（“Fullname:，this.state.user.Fullname”）；
//返回false；
如果（UpdateInfo.fullname==“”| | UpdateInfo.phone==“”| | UpdateInfo.fixedLinePhone==“”| | UpdateInfo.jobPosition==“”| | UpdateInfo.place==“”）{
log（“blank is:”，this.state.blank）；
const{blank}=this.state；
如果（空白）{
this.blank.focus（）；
console.log（“某些输入为空”，为空）；
}
toastr.clear（）
托马斯特错误(
self.props.intl.formatMessage（{id:'formerror new'}，{inputName:blank}），
'',
{closeButton:true}
)
}否则{
如果（userDataModified）{
这是我的国家({
加载：对，
loadingCounterSemaphore:this.state.loadingCounterSemaphore+1，
})
this.props.editUser（updateInfo）.then（数据=>{
const loadingCounterSemaphore=self.state.loadingCounterSemaphore-1
常量加载=加载计数器量>0
自我状态({
加载，
装载反航母，
用户：{
…self.state.user，
编辑模式：false，
},
})
toastr.clear（）
成功(
self.props.intl.formatMessage（{id:'user updated'}），
'',
{closeButton:true}
)
this.moveToTab（方向='next'？3:1）
}).catch（错误=>{
const loadingCounterSemaphore=self.state.loadingCounterSemaphore-1
常量加载=加载计数器量>0
自我状态({
加载，
装载反航母，
})
toastr.clear（）
托马斯特错误(
self.props.intl.formatMessage（{id:'错误更新用户'}），
'',
{closeButton:true}
)
})
}否则{
this.moveToTab（方向='next'？3:1）
}
}
}
inputChanged=prop=>（{target:{value}}）=>{
让user=this.state.user
用户[prop]=值
this.setState（{user}）
日志（“道具为：”，道具）
如果（值==“”）{
这是我的国家({
空白：道具
})
}
}
render（）{
返回(
//“上一步”和“下一步”按钮提交表单数据
)
}