Javascript 自动对焦反应 JS 中的输入元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42324423/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AutoFocus an input element in react JS
提问by Ayan
I am unable to autofocus the input tag rendered in this component. What am I missing here?
我无法自动聚焦此组件中呈现的输入标签。我在这里缺少什么？
class TaskBox extends Component {
constructor() {
super();
this.focus = this.focus.bind(this);
}
focus() {
this.textInput.focus();
}
componentWillUpdate(){
this.focus();
}
render() {
let props = this.props;
return (
<div style={{display: props.visible ? 'block' : 'none'}}>
<input
ref={(input) => { this.textInput = input; }}
onBlur={props.blurFN} />
<div>
<div>Imp.</div>
<div>Urg.</div>
<div>Role</div>
</div>
<div>
<button>Add goal</button>
</div>
</div>
)
}
}
Any help is appreciated.
任何帮助表示赞赏。
回答by Mayank Shukla
There is a attribute available for auto focusing autoFocus, we can use that for auto focusing of input element instead of using ref.
有一个可用于自动聚焦的属性autoFocus，我们可以使用它来自动聚焦输入元素而不是使用ref.
Using autoFocuswith input element:
autoFocus与输入元素一起使用：
<input autoFocus />
<input autoFocus />
We can also use ref, but with ref we need to call focus method at correct place, you are calling that in componentWillUpdatelifecycle method, that method will not triggered during initial rendering, Instead of that use componentDidMountlifecycle method:
我们也可以使用ref，但是使用 ref 我们需要在正确的位置调用 focus 方法，您在componentWillUpdate生命周期方法中调用它，该方法不会在初始渲染期间触发，而是使用componentDidMount生命周期方法：
componentDidMount(){
this.focus();
}
shouldComponentUpdate: is always called before the render method and enables to define if a re-rendering is needed or can be skipped. Obviously this method is never called on initial rendering. It will get called only when some state change happen in the component.
shouldComponentUpdate：总是在渲染方法之前调用，并允许定义是否需要或可以跳过重新渲染。显然，在初始渲染时永远不会调用此方法。仅当组件中发生某些状态更改时才会调用它。
componentWillUpdategets called as soon as the the shouldComponentUpdatereturned true.
componentWillUpdate只要shouldComponentUpdate返回 true就会被调用。
componentDidMount: As soon as the render method has been executed the componentDidMount function is called. The DOM can be accessed in this method, enabling to define DOM manipulations or data fetching operations. Any DOM interactions should always happen in this.
componentDidMount：一旦执行了 render 方法，就会调用 componentDidMount 函数。可以在此方法中访问 DOM，从而可以定义 DOM 操作或数据获取操作。任何 DOM 交互都应该在这里发生。
Reference: https://facebook.github.io/react/docs/react-component.html
参考：https: //facebook.github.io/react/docs/react-component.html
回答by shinlenox
Set an ID to the input and then use .setAttribute('autoFocus', true)to the element when you want it focused
为输入设置一个 ID，然后.setAttribute('autoFocus', true)在需要聚焦时将其用于元素
