reactjs - 如何以编程方式 react 焦点输入

Question

我正在尝试实现一个非常简单的用例，一个 UI 功能，其中:

1. 有一个标签，其中包含一些内容
2. 如果单击，文本输入会将其替换为可用标签的内容
3. 用户可以编辑内容
4. 按下 Enter 键后，输入会隐藏，标签会返回并显示更新的内容

我最终可以得到所有正确的结果(事实上，使用 MongoBD 后端、redux 等)，而我唯一做不到的事情(花一整天的时间在谷歌上搜索并阅读 S.O.F 类似的帖子)是:

当我的文本输入出现时，我无法将焦点转移到它!首先我这样累了:

<div className={((this.state.toggleWordEdit) ? '' : 'hidden')}>
<input id={this.props.word._id} className="form-control"
        ref="updateTheWord" 
        defaultValue={this.state.word}
        onChange={this.handleChange}
        onKeyPress={this.handleSubmit}
        autoFocus={this.state.toggleWordEdit}/></div>
    <div className={((this.state.toggleWordEdit) ? 'hidden' : '')}>
      <h3 onClick={this.updateWord}>
        {this.state.word}</h3>
    </div>

但是自动对焦肯定不起作用(我“猜测”是因为表单已呈现，但处于隐藏状态，使得自动对焦毫无用处)。

接下来我在我的 this.updateWor 中尝试了我在 google 和 S.O.F. 上找到的许多建议:

this.refs.updateTheWord.focus();

这与类似的建议一起都不起作用。我还试图欺骗 React 只是为了看看我是否能做点什么!我使用真实的 DOM:

    const x = document.getElementById(this.props.word._id);
    x.focus();

而且它也不起作用。我什至无法理解的一件事是这样的建议: having ref as a method (I "guess")我什至没有尝试过，因为我有多个这些组件，并且我需要 ref 来进一步获取每个组件的值，而且我无法想象如果我的 ref 没有命名，我如何获取其值!

那么您能否给出一个想法，帮助我理解，如果我不使用表单(因为我需要一个输入框替换标签)，当它是 CSS(Bootstrap)类时，我如何设置它的焦点请问正在失去“隐藏”吗？

Answer 1

您使用 refs 的方式不是最优选的方式，否则它不再是最佳实践。尝试这样的事情

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    this.focus = this.focus.bind(this);
  }

  focus() {
    this.textInput.current.focus();
  }

  render() {

    return (
      <div>
        <input
          type="text"
          ref={(input) => { this.textInput = input; }} />
        <input
          type="button"
          value="Set Focus"
          onClick={this.focus}
        />
      </div>
    );
  }
}

更新
从 React 16.3 开始，您可以使用 React.createRef() API

class MyClass extends React.Component {
  constructor(props) {
    super(props);
    // create a ref to store the textInput DOM element
    this.textInput = React.createRef();
    this.focus = this.focus.bind(this);
  }

  focus() {
    // Explicitly focus the text input using the raw DOM API
    // Note: we're accessing "current" to get the DOM node
    this.textInput.current.focus();
  }

  render() {
    // tell React that we want to associate the <input> ref
    // with the `textInput` that we created in the constructor
    return (
      <div>
        <input
          type="text"
          ref={this.textInput} />
        <input
          type="button"
          value="Set Focus"
          onClick={this.focus}
        />
      </div>
    );
  }
}

从 React 18.xx 向上，您可以使用 useRef Hook

import React, { useRef } from "react";

export const Form = () => {
  const inputRef = useRef(null);

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

  return (
    <div>
      <input type="text" ref={inputRef} />
      <input type="button" value="Set Focus" onClick={focus} />
    </div>
  );
};