如何以编程方式反应焦点输入 [英] how react programmatically focus input

问题描述

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

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

我最终可以完全正确(实际上是使用MongoBD后端，redux等)，而我唯一做不到的事情(花了一整天的时间在Google上搜索和阅读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肯定无法正常工作(我猜测"是因为呈现了表单，但是处于隐藏状态，这使autoFocus毫无用处).

接下来，我在this.updateWor中尝试了很多在Google和S.O.F.上发现的建议:

this.refs.updateTheWord.focus();

连同类似的建议都无效.我也试图愚弄React，只是看我是否能做点什么！我使用了真正的DOM:

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

，它也不起作用.我什至无法理解的一件事是这样的建议: 将ref作为方法(我猜测") 我什至没有尝试过，因为我有多个这些组件，并且我需要ref来进一步获取每个组件的价值，而且我无法想象如果我的ref没有被命名，我怎么能得到！！ >

所以，请您提供一个想法，以帮助我了解如果我不使用Form(因为我需要一个输入框替换标签)，如何在CSS(Bootstrap)类中设置其焦点要失去隐藏"了吗?

解决方案

使用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>
    );
  }
}

I'm trying to implement a very simple use case, a UI feature, where:

1. There is a label with some content in it
2. If clicked, a text input replaces it with the content of label available
3. User can edit the content
4. When enter is pressed, the input hides and label is back with updated content

I could get finally all correct (in fact with a MongoBD backend, redux, etc.), and the only thing I couldn't ever do (paying a complete day in googling and reading S.O.F similar posts) was this:

When my text input appears, I can't transfer focus to it! First I tired this way:

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

but autoFocus sure didn't work (I "guess" because the form is rendered, but in hidden state, making autoFocus useless).

Next I tried in my this.updateWor, many of suggestions I found on google and S.O.F.:

this.refs.updateTheWord.focus();

which together with similar suggestions all didn't work. Also I tried to fool React just to see if at all I can do something! I used real DOM:

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

and it didn't work either. One thing I even could not understand to put into word is a suggestion like this: having ref as a method (I "guess") I didn't even try it because I have multiples of these components and I need ref to further get value of, per component, and I couldn't imagine if my ref is not named, how I could get the value of!

So could you please give an idea, helping me to understand that in case I'm not using a Form (because I need a single input box replacing a label) how I could set its focus when it's CSS (Bootstrap) class is losing 'hidden' please?

解决方案

The way you have used refs is not the most preferred way or else its not the best practice anymore . try some thing like this

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

Update
From React 16.3 upwards you can use the 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>
    );
  }
}

这篇关于如何以编程方式反应焦点输入的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！