呈现组件后,将焦点设置在特定文本字段上的反应是什么?
文档似乎建议使用引用,例如:
ref="nameInput"
在渲染函数中的输入字段上进行设置,然后调用:
this.refs.nameInput.getInputDOMNode().focus();
但是我应该在哪里称呼它?我已经尝试了几个地方,但无法正常工作。
您应该这样做,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>
问题内容: 呈现组件后,将焦点设置在特定文本字段上的反应方式是什么? 文档似乎建议使用引用,例如: 在渲染函数中的输入字段上进行设置,然后调用: 但是我应该在哪里称呼它呢?我已经尝试了几个地方,但无法正常工作。 问题答案: 您应该这样做,而不是。像这样
问题内容: 数据加载后是否可以通过控制器设置输入字段的焦点(在这种情况下,通过$ resource)? 通过ng-show隐藏输入,直到从API返回数据为止,但是我找不到将焦点设置在输入上的方法。我知道输入的ng- model名称,以及输入名称,这意味着我可以通过jQuery来做到这一点,但我宁愿使用AngularJS方式来做到这一点。 我在这里尝试了很多指令示例,但是它们似乎都集中在1.2 ng
我决定使用来构建网格。 要有更好的UI,只有一件事,那就是在单击AddNew按钮后,我想关注新项目的输入字段。 我打算使用,但不知道如何子项 下面是我使用react表的示例: https://codesandbox.io/s/beautiful-proskuriakova-lpfxn 在这种情况下,我希望在添加新行后关注字段。 更新:我可以通过使用本机HTML提供的支持来关注输入。 答案在这里 但
我正在使用react,希望输入文本显示内存数据存储中的值,然后在值更改时更新存储,从而触发重新渲染。我看到的问题是,我的输入文本在重读时失去了焦点。我已经尝试设置key属性,覆盖shouldComponentUpdate并返回false,以防止react重新为组件命名,但没有效果。不管怎样,后者似乎不是一个好的长期解决方案。 从文档: 请注意,在未来的React中,可能会将ashidCompone
我应该让我的组件“受控”吗?什么是“最佳实践”?
在阅读了React设置焦点和带有超时的React焦点后,我仍然有点困惑,在输入上设置的正确跨浏览器选项是什么。 我有一个问题与条件渲染输入可能有焦点后渲染在,其中放置在。 1)解决方案与组件didUpdate: 此解决方案适用于Chrome、IE11、Edge,但不适用于最新的Firefox(单击后,输入事件不会出现)。 2)解决方案与请求动画帧: 该解决方案适用于Chrome、IE11、Edge