ReactJS:重置表单后，如何将焦点置于输入字段

Question

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

谢谢

//代码

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

Answer 1

用于类组件

您应该传递到输入a ref

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

并在输入参考文献

上获取集合.focus

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

用于功能组件

您应该使用useRef钩。

const inputRef = useRef(null);

将inputRef传递到input

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

并使用current在输入ref上获取集合.focus(wich指向已安装的输入元素(。

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

Answer 2

使用自动对焦与输入元素：

  <input autoFocus />

在重置上调用它单击

  formReset(){
    this.focus();
  }