在ReactJS中提交表单后如何在空白的输入字段上设置焦点

Question

我正在尝试一个表单验证，当用户尝试提交表单时，该验证将焦点放在输入字段上，而将任何输入字段都留空。 预期结果 仅在单击提交（在我的情况下是上一个或下一个按钮）按钮之后，焦点才出现，并且仅在空的输入字段上出现。 当前结果 不管是否为空，焦点仅出现在最后一个输入字段上。

我的代码

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>
    )
}