Question

我试图实现一个非常简单的用例，一个用户界面功能，其中：

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

我终于可以得到所有正确的（事实上有一个MongoBD后端，redux等），而且我唯一做过的事情（用谷歌搜索完整的一天并阅读SOF类似的帖子）是这个：

当我的文字输入出现时，我无法将焦点转移到它！首先我这样累：

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

但是autoFocus肯定没有用（我猜测＆＃34;因为表单已呈现，但处于隐藏状态，使autoFocus无效）。

接下来我尝试了我的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进一步获得每个组件的价值，我无法想象如果我的引用没有命名，我怎么能得到这个值！的

那么请你提出一个想法，帮助我理解，如果我没有使用表格（因为我需要一个输入框替换标签），我可以如何设置它的焦点。 CSS（Bootstrap）类正在失去＆＃39;隐藏＆＃39;请？

Answer 1

你使用refs的方式不是最喜欢的方式，否则它不再是最佳实践。试试这样的事情

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

  focus() {
    this.textInput.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>
    );
  }
}

Answer 2

@BenCarp的打字稿答案

将inputRef传递到input并只需调用setFocus即可将焦点设置到它。

export const useInputFocus = (): [MutableRefObject<HTMLInputElement | undefined>, () => void] => {
  const inputRef = useRef<HTMLInputElement>();
  const setFocus = (): void => {
    const currentEl = inputRef.current;
    if (currentEl) {
      currentEl.focus();
    }
  };
  return [inputRef, setFocus];
};

Answer 3

每次使用componentDidUpdate方法更新组件

componentDidUpdate(prevProps, prevState) {
     this.input.focus();
}

Answer 4

只需将autofocus属性添加到input。（当然在JSX中是autoFocus ）

<input autoFocus ...

Answer 5

除了前面的答案外，我还添加了setTimeout以使其起作用

handleClick() {


    if (this.searchInput) {
        setTimeout(() => {

            this.searchInput.focus();

        }, 100);
    }
}

其中searchInput是输入的jsx引用

<input
      type="text"
      name="searchText"
      ref={(input) => { this.searchInput = input; }}
      placeholder="Search" />

并且handleClick()是任何元素的onClick处理程序

Answer 6

useFocus挂钩

// General Focus Hook
const useFocus = (initialFocus = false, id = "") => {
    const [focus, setFocus] = useState(initialFocus)
    const setFocusWithTrueDefault = (param) => setFocus(isBoolean(param)? param : true)
    return ([
        setFocusWithTrueDefault, {
            autoFocus: focus,
            key: `${id}${focus}`,
            onFocus: () => setFocus(true),
            onBlur: () => setFocus(false),
        },
    ])
}


const FocusDemo = () => {

    const [labelStr, setLabelStr] = useState("Your initial Value")
    const [setFocus, focusProps] = useFocus(true)

    return (
        <> {/* React.Fragment */}
            <input
                onChange={(e)=> setLabelStr(e.target.value)}
                value={labelStr}
                {...focusProps}
            />
            <h3 onClick={setFocus}>{labelStr}</h3>
        </>
    )

}

有关更完整的演示，请单击[单击此处] [1]。

Answer 7

您可以使用“useRef”钩子并引用您的输入控件，然后使用您的 reference.current.focus()

您可以查看视频示例：

https://www.youtube.com/watch?v=LPL440Yrl8s

如何以编程方式集中注意力输入

7 个答案:

useFocus挂钩