时间戳

首页 > 解决方案 > ReactJs：重置表单后如何将焦点返回到输入字段

reactjs - ReactJs：重置表单后如何将焦点返回到输入字段

问题描述

重置字段后如何将焦点设置回输入字段？

谢谢

//代码

<div
            className={cn("input-border-wrapper", { "is-disabled": disabled })}
          >
            <input
              placeholder={label}
              required={optional === null ? !!required`${name}` : !optional}
              readOnly={readonly}
              aria-describedby={describedByIds}
              autoComplete={autocomplete`${name}`}
              inputMode={inputmode`${name}`}
              {...validations`${name}`}
              {...this.props.input}
              {...{ disabled, id }}
              type={type || inputtype`${name}` || "text"}
              ref={refCallback}
            />
          </div>
          {(optional === null ? !required`${name}` : optional) &&
            !hasValue && (
              <span className="input-wrapper--optional">{optionalLabel}</span>
            )}
          <InputIcon
            ariaLabel={buttonAriaLabel}
            hasClearIcon={
              shouldShowClearIcon && hasValue && (isActive || hasError)
            }
            hasCalendarIcon={
              button === "lh-datepicker" || icon === "lh-datepicker"
            }
            name={button || icon}
            onClick={onButtonClick}
            onMouseDown={() => clearInputValue(form, name, "")
            }
            {...{ disabled, hasIcon, hasButton }}
          />

标签： reactjsautofocus

解决方案

对于类组件

您应该将 ref 传递给输入

<input ref={inputRef => this.inputRef = inputRef } {...} />

并获取.focus输入参考上的集合。

resetForm = () => {
    this.inputRef.focus()
}

对于功能组件

你应该使用useRef钩子。

const inputRef = useRef(null);

传递inputRef给input

<input ref={inputRef} {...} />

并使用（指向已安装的输入元素的至极）获取.focus输入参考上的集合。current

const resetForm = () => {   
    inputRef.current.focus()
}

推荐阅读