渲染后如何在输入字段上设置焦点？

Question

在渲染组件后设置焦点在特定文本字段上的反应方式是什么？

文档似乎建议使用 refs，例如：

在渲染函数中我的输入字段设置ref="nameInput"，然后调用：

this.refs.nameInput.getInputDOMNode().focus(); 

但是我应该在哪里称呼它呢？我已经尝试了几个地方，但我无法让它工作。

Answer 1

专注于安装

如果您只想在元素安装（初始渲染）时对其进行聚焦，只需简单地使用 autoFocus 属性即可。

<input type="text" autoFocus />

动态焦点

要动态控制焦点，请使用通用函数来隐藏组件的实现细节。

React 16.8 + 功能组件 - useFocus hook

const FocusDemo = () => {

    const [inputRef, setInputFocus] = useFocus()

    return (
        <> 
            <button onClick={setInputFocus} >
               Focus
            </button>
            <input ref={inputRef} />
        </>
    )
    
}

const useFocus = () => {
    const htmlElRef = useRef(null)
    const setFocus = () => {htmlElRef.current &&  htmlElRef.current.focus()}

    return [ htmlElRef, setFocus ] 
}

Full Demo

React 16.3 + 类组件 - 利用焦点

class App extends Component {
  constructor(props){
    super(props)
    this.inputFocus = utilizeFocus()
  }

  render(){
    return (
      <> 
          <button onClick={this.inputFocus.setFocus}>
             Focus
          </button>
          <input ref={this.inputFocus.ref}/>
      </>
    )
  } 
}

const utilizeFocus = () => {
    const ref = React.createRef()
    const setFocus = () => {ref.current &&  ref.current.focus()}

    return {setFocus, ref} 
}

Full Demo

Answer 2

打字稿中的 Ben Carp 解决方案

React 16.8 + 函数式组件 - useFocus hook

export const useFocus = (): [React.MutableRefObject<HTMLInputElement>, VoidFunction] => {
  const htmlElRef = React.useRef<HTMLInputElement>(null);
  const setFocus = React.useCallback(() => {
    if (htmlElRef.current) htmlElRef.current.focus();
  }, [htmlElRef]);

  return React.useMemo(() => [htmlElRef, setFocus], [htmlElRef, setFocus]);
};

Answer 3

没有自动对焦的简单解决方案：

<input ref={ref => ref && ref.focus()}
    onFocus={(e)=>e.currentTarget.setSelectionRange(e.currentTarget.value.length, e.currentTarget.value.length)}
    />

ref 触发焦点，并触发onFocus 计算结束并相应地设置光标。

Answer 4

React 16.3 添加了一种新的便捷方式来处理这个问题，方法是在组件的构造函数中创建一个 ref 并像下面这样使用它：

class MyForm extends Component {
  constructor(props) {
      super(props);

      this.textInput = React.createRef();
  }

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

  render() {
    return(
      <div>
        <input ref={this.textInput} />
      </div>
    );
  }
}

有关React.createRef的更多详细信息，您可以在React博客中查看this article。

更新：

从React 16.8开始，useRef钩子可以用在函数组件中，达到同样的效果：

import React, { useEffect, useRef } from 'react';

const MyForm = () => {
  const textInput = useRef(null);

  useEffect(() => {
    textInput.current.focus();
  }, []);

  return (
    <div>
      <input ref={textInput} />
    </div>
  );
};

Answer 5

使用带有 Typescript 的 React Hooks / 功能组件，您可以使用 useRef hook 和 HTMLInputElement 作为 useRef 的通用参数：

import React, { useEffect, useRef } from 'react';

export default function MyComponent(): JSX.Element {
    const inputReference = useRef<HTMLInputElement>(null);

    useEffect(() => {
        inputReference.current?.focus();
    }, []);

    return (
        <div>
            <input ref={inputReference} />
        </div>
    );
}

或者如果使用reactstrap，请将inputReference 提供给innerRef 而不是ref：

import React, { useEffect, useRef } from 'react';
import { Input } from 'reactstrap';

export default function MyComponent(): JSX.Element {
    const inputReference = useRef<HTMLInputElement>(null);

    useEffect(() => {
        inputReference.current?.focus();
    }, []);

    return (
        <div>
            <Input innerRef={inputReference} />
        </div>
    );
}

Answer 6

<input type="text" autoFocus />

总是先尝试简单和基本的解决方案，对我有用。

Answer 7

根据更新后的语法，可以使用this.myRref.current.focus()

Answer 8

由于这个错误有很多原因，我想我也会发布我面临的问题。对我来说，问题是我将输入呈现为另一个组件的内容。

export default ({ Content }) => {
  return (
  <div className="container-fluid main_container">
    <div className="row">
      <div className="col-sm-12 h-100">
        <Content />                                 // I rendered my inputs here
      </div>
    </div>
  </div>
  );
}

这是我调用上述组件的方式：

<Component Content={() => {
  return (
    <input type="text"/>
  );
}} />

Answer 9

要将焦点移至新创建的元素，您可以将元素的 ID 存储在状态中并使用它来设置autoFocus。例如

export default class DefaultRolesPage extends React.Component {

    addRole = ev => {
        ev.preventDefault();
        const roleKey = this.roleKey++;
        this::updateState({
            focus: {$set: roleKey},
            formData: {
                roles: {
                    $push: [{
                        id: null,
                        name: '',
                        permissions: new Set(),
                        key: roleKey,
                    }]
                }
            }
        })
    }

    render() {
        const {formData} = this.state;

        return (
            <GridForm onSubmit={this.submit}>
                {formData.roles.map((role, idx) => (
                    <GridSection key={role.key}>
                        <GridRow>
                            <GridCol>
                                <label>Role</label>
                                <TextBox value={role.name} onChange={this.roleName(idx)} autoFocus={role.key === this.state.focus}/>
                            </GridCol>
                        </GridRow>
                    </GridSection>
                ))}
            </GridForm>
        )
    }
}

这样，所有文本框都不会在页面加载时获得焦点（就像我想要的那样），但是当您按下“添加”按钮创建新记录时，新记录就会获得焦点。

由于autoFocus 不会再次“运行”，除非重新挂载该组件，因此我不必费心取消设置this.state.focus（即当我更新其他状态时它不会继续抢回焦点）。

Answer 10

在尝试了上面的很多选项但没有成功后，我发现这是因为我是 disabling 然后 enabling 导致焦点丢失的输入。

我有一个道具sendingAnswer，它会在我轮询后端时禁用输入。

<Input
  autoFocus={question}
  placeholder={
    gettingQuestion ? 'Loading...' : 'Type your answer here...'
  }
  value={answer}
  onChange={event => dispatch(updateAnswer(event.target.value))}
  type="text"
  autocomplete="off"
  name="answer"
  // disabled={sendingAnswer} <-- Causing focus to be lost.
/>

一旦我删除了禁用的道具，一切又开始工作了。

Answer 11

@Dhiraj 的回答是正确的，为方便起见，您可以使用 autoFocus 道具在安装时自动聚焦输入：

<input autoFocus name=...

请注意，在 jsx 中它是 autoFocus（大写 F），这与不区分大小写的普通旧 html 不同。

Answer 12

你不需要getInputDOMNode??在这种情况下...

当组件被挂载时，只需简单地获取ref 和focus() -- componentDidMount...

import React from 'react';
import { render } from 'react-dom';

class myApp extends React.Component {

  componentDidMount() {
    this.nameInput.focus();
  }

  render() {
    return(
      <div>
        <input ref={input => { this.nameInput = input; }} />
      </div>
    );
  }

}

ReactDOM.render(<myApp />, document.getElementById('root'));

Answer 13

这是正确的方法，如何自动对焦。当您使用回调而不是字符串作为参考值时，它会被自动调用。使用getDOMNode

render: function() {
  return <TextInput ref={(c) => this._input = c} />;
},
componentDidMount: function() {
  this._input.focus();
},

Answer 14

自动对焦最适合我。我需要在双击时将一些文本更改为带有该文本的输入，所以这就是我最终得到的结果：

<input autoFocus onFocus={this.setCaretToEnd} value={this.state.editTodo.value} onDoubleClick={this.updateTodoItem} />

注意：要解决 React 将插入符号放在文本开头的问题，请使用以下方法：

setCaretToEnd(event) {
    var originalText = event.target.value;
    event.target.value = '';
    event.target.value = originalText;
}

在这里找到： https://coderwall.com/p/0iz_zq/how-to-put-focus-at-the-end-of-an-input-with-react-js

Answer 15

我也有同样的问题，但我也有一些动画，所以我的同事建议使用 window.requestAnimationFrame

这是我的元素的 ref 属性：

ref={(input) => {input && window.requestAnimationFrame(()=>{input.focus()})}}

Answer 16

阅读了几乎所有的答案，但没有看到getRenderedComponent().props.input

设置你的文本输入参考

this.refs.username.getRenderedComponent().props.input.onChange('');

Answer 17

请注意，这些答案都不适用于material-ui TextField component。根据How to set focus to a materialUI TextField?，我不得不跳过一些圈子才能让它工作：

const focusUsernameInputField = input => {
  if (input) {
    setTimeout(() => {input.focus()}, 100);
  }
};

return (
  <TextField
    hintText="Username"
    floatingLabelText="Username"
    ref={focusUsernameInputField}
  />
);

Answer 18

您应该改为在componentDidMount 和refs callback 中执行此操作。像这样的

componentDidMount(){
   this.nameInput.focus(); 
}

class App extends React.Component{
  componentDidMount(){
    this.nameInput.focus();
  }
  render() {
    return(
      <div>
        <input 
          defaultValue="Won't focus" 
        />
        <input 
          ref={(input) => { this.nameInput = input; }} 
          defaultValue="will focus"
        />
      </div>
    );
  }
}
    
ReactDOM.render(<App />, document.getElementById('app'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
<div id="app"></div>

Answer 19

最简单的答案是在输入文本元素中添加 ref="some name" 并调用以下函数。

componentDidMount(){
   this.refs.field_name.focus();
}
// here field_name is ref name.

<input type="text" ref="field_name" />

Answer 20

更新版本可以查看here

componentDidMount() {

    // Focus to the input as html5 autofocus
    this.inputRef.focus();

}
render() {
    return <input type="text" ref={(input) => { this.inputRef = input }} />
})

Answer 21

从 React 0.15开始，最简洁的方法是：

<input ref={input => input && input.focus()}/>

Answer 22

我刚刚遇到了这个问题，我正在使用 react 15.0.1 15.0.2 并且我正在使用 ES6 语法，并且从 v 之后的其他答案中并没有完全得到我需要的东西.15 数周前下降，部分 this.refs properties were deprecated 和 removed。

总的来说，我需要的是：

1. 在组件挂载时聚焦第一个输入（字段）元素
2. 关注第一个出错的输入（字段）元素（提交后）

我正在使用：

• React 容器/演示组件
• Redux
• 反应路由器

聚焦第一个输入元素

我在页面上的第一个<input /> 上使用了autoFocus={true}，这样当组件挂载时，它就会获得焦点。

关注第一个出错的输入元素

这花费了更长的时间并且更加复杂。为了简洁起见，我保留了与解决方案无关的代码。

Redux 存储/状态

我需要一个全局状态来知道我是否应该设置焦点并在设置焦点时禁用它，所以当组件重新渲染时我不会继续重新设置焦点（我将使用componentDidUpdate()检查设置焦点。）

这可以按照您认为适合您的应用程序进行设计。

{
    form: {
        resetFocus: false,
    }
}

容器组件

该组件需要设置resetfocus 属性和一个回调来清除该属性，如果它最终将焦点设置在自身上。

另外请注意，我将我的动作创建者组织成单独的文件，主要是因为我的项目相当大，我想将它们分成更易于管理的块。

import { connect } from 'react-redux';
import MyField from '../presentation/MyField';
import ActionCreator from '../actions/action-creators';

function mapStateToProps(state) {
    return {
        resetFocus: state.form.resetFocus
    }
}

function mapDispatchToProps(dispatch) {
    return {
        clearResetFocus() {
            dispatch(ActionCreator.clearResetFocus());
        }
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(MyField);

演示组件

import React, { PropTypes } form 'react';

export default class MyField extends React.Component {
    // don't forget to .bind(this)
    constructor(props) {
        super(props);
        this._handleRef = this._handleRef.bind(this);
    }

    // This is not called on the initial render so
    // this._input will be set before this get called
    componentDidUpdate() {
        if(!this.props.resetFocus) {
            return false;
        }

        if(this.shouldfocus()) {
            this._input.focus();
            this.props.clearResetFocus();
        }
    }

    // When the component mounts, it will save a 
    // reference to itself as _input, which we'll
    // be able to call in subsequent componentDidUpdate()
    // calls if we need to set focus.
    _handleRef(c) {
        this._input = c;
    }

    // Whatever logic you need to determine if this
    // component should get focus
    shouldFocus() {
        // ...
    }

    // pass the _handleRef callback so we can access 
    // a reference of this element in other component methods
    render() {
        return (
            <input ref={this._handleRef} type="text" />
        );
    }
}

Myfield.propTypes = {
    clearResetFocus: PropTypes.func,
    resetFocus: PropTypes.bool
}

概述

一般的想法是，每个可能有错误并被聚焦的表单字段都需要检查自身以及是否需要将焦点设置在自身上。

需要执行业务逻辑来确定给定字段是否是设置焦点的正确字段。这未显示，因为它取决于单个应用程序。

提交表单时，该事件需要将全局焦点标志resetFocus 设置为true。然后当每个组件更新自己时，它会看到它应该检查是否获得焦点，如果获得焦点，则调度事件以重置焦点，这样其他元素就不必继续检查。

编辑 附带说明一下，我将业务逻辑放在一个“实用程序”文件中，我只是导出了该方法并在每个 shouldfocus() 方法中调用它。

干杯！

Answer 23

React 文档现在为此提供了一个部分。 https://facebook.github.io/react/docs/more-about-refs.html#the-ref-callback-attribute

 render: function() {
  return (
    <TextInput
      ref={function(input) {
        if (input != null) {
          input.focus();
        }
      }} />
    );
  },

Answer 24

警告：ReactDOMComponent：不要访问 DOM 节点的 .getDOMNode()；相反，直接使用节点。此 DOM 节点由 App 渲染。

应该是

componentDidMount: function () {
  this.refs.nameInput.focus();
}

Answer 25

如果你只是想在 React 中进行自动对焦，这很简单。

<input autoFocus type="text" />

---

如果您只想知道将代码放在哪里，答案就在 componentDidMount() 中。

v014.3

componentDidMount() {
    this.refs.linkInput.focus()
}

在大多数情况下，您可以将 ref 附加到 DOM 节点并完全避免使用 findDOMNode。

在此处阅读 API 文档：https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode

Answer 26

参考。 @Dave 对 @Dhiraj 回答的评论；另一种方法是在正在渲染的元素上使用 ref 属性的回调功能（在组件首次渲染之后）：

<input ref={ function(component){ React.findDOMNode(component).focus();} } />

More info

Answer 27

这不再是最佳答案。从 v0.13 开始，在某些奇怪的情况下，this.refs 可能在 componentDidMount() 运行之后才能使用。

只需将 autoFocus 标签添加到您的输入字段，如 FakeRainBrigand 所示。

Answer 28

您可以将该方法调用放在渲染函数中。或者生命周期方法里面，componentDidUpdate