React在渲染之后着重于input

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

文档似乎build议使用参考，例如：

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

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

但是我应该在哪里调用？ 我已经尝试了几个地方，但我不能得到它的工作。

Answer 1

你应该在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="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 2

@ Dhiraj的回答是正确的，但为了方便起见，您可以使用autoFocus道具来安装时自动对焦input。

 <input autoFocus name=... 

Answer 3

至于React 0.15 ，最简洁的方法是：

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

Answer 4

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

 <input autoFocus type="text" /> 

---

而如果你只是想知道把代码放在哪里，答案是在componentDidMount（）中。

v014.3

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

在大多数情况下，您可以附加一个引用到DOM节点，并避免使用findDOMNode。

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

Answer 5

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 6

我刚刚遇到了这个问题，我正在使用react 15.0.1 15.0.2，我使用的是ES6语法，并没有完全得到自从第15周前下降的其他答案我需要的一些和this.refs属性已被弃用和删除 。

一般来说，我需要的是：

1. 组件安装时，将第一个input（字段）元素聚焦
2. 将第一个input（字段）元素聚焦一个错误（提交后）

我在用着：

• 反应容器/演示文稿组件
• 终极版
• 反应-路由器

关注第一个input元素

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

将第一个input元素聚焦于一个错误

这花了更长的时间，更令人费解。 为了简洁，我将代码与解决scheme无关。

Redux商店/状态

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

这可以根据您的需要进行devise。

 { form: { resetFocus: false, } } 

容器组件

该组件需要具有resetfocus属性设置和callback清除属性，如果它最终设置自己的焦点。

另外请注意，我将Action Creators组织成单独的文件，这主要是因为我的项目相当大，我想将它们分解为更易于pipe理的块。

 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 7

这不是最好的答案。 从v0.13 this.refs ，在一些奇怪的情况下， this.refs可能无法使用，直到AFTER componentDidMount()运行。

只需将autoFocus标签添加到您的input字段，如上面显示的FakeRainBrigand。

Answer 8

参考。 @戴夫评论@ Dhiraj的答案; 另一种方法是使用正在呈现的元素的ref属性的callback函数（在组件首次呈现之后）：

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

更多信息

Answer 9

这是正确的方法，如何自动对焦。 当您使用callback而不是string作为ref值时，它被自动调用。 你得到你的ref可以比getDOMNode无需触摸DOM

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

Answer 10

你可以把这个方法调用放到render函数中。 或者在生命周期方法里面， componentDidUpdate

Answer 11

警告：ReactDOMComponent：不要访问DOM节点的.getDOMNode（）; 相反，直接使用节点。 这个DOM节点由App呈现。

应该

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

Answer 12

最简单的答案是在input文本元素中添加ref =“some name”并调用下面的函数。

 componentDidMount(){ this.refs.field_name.focus(); } // here field_name is ref name. <input type="text" ref="field_name" /> 

Answer 13

请注意，这些答案没有一个适用于我的材质UI TextField组件 。 每个如何将焦点设置为materialUI TextField？ 我不得不跳过一些箍来使这个工作：

 const focusUsernameInputField = input => { if (input) { setTimeout(() => {input.focus()}, 100); } }; return ( <TextField hintText="Username" floatingLabelText="Username" ref={focusUsernameInputField} /> ); 

Answer 14

更新版本，你可以在这里查看

 componentDidMount() { // Focus to the input as html5 autofocus this.inputRef.focus(); } render() { return <input type="text" ref={(input) => { this.inputRef = input }} /> }) 

Answer 15

也可以在componentDidMount中完成，因为它在组件被渲染使用之后被调用

 ReactDOM.findDOMNode(this.refs.item).focus(); <input type="text" ref='item'/> 

Answer 16

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

这是我的元素的ref属性：

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

Answer 17

你不需要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 18

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

设置你的文字input参考

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