我只是写入文本输入,在 onChange
事件中我调用 setState
,所以React重新呈现我的UI . 问题是文本输入总是失去焦点,所以我需要再次关注每个字母:D .
var EditorContainer = React.createClass({
componentDidMount: function () {
$(this.getDOMNode()).slimScroll({height: this.props.height, distance: '4px', size: '8px'});
},
componentDidUpdate: function () {
console.log("zde");
$(this.getDOMNode()).slimScroll({destroy: true}).slimScroll({height: 'auto', distance: '4px', size: '8px'});
},
changeSelectedComponentName: function (e) {
//this.props.editor.selectedComponent.name = $(e.target).val();
this.props.editor.forceUpdate();
},
render: function () {
var style = {
height: this.props.height + 'px'
};
return (
<div className="container" style={style}>
<div className="row">
<div className="col-xs-6">
{this.props.selected ? <h3>{this.props.selected.name}</h3> : ''}
{this.props.selected ? <input type="text" value={this.props.selected.name} onChange={this.changeSelectedComponentName} /> : ''}
</div>
<div className="col-xs-6">
<ComponentTree editor={this.props.editor} components={this.props.components}/>
</div>
</div>
</div>
);
}
});
12 回答
没有看到你的其余代码,这是一个猜测 . 创建EditorContainer时,请为组件指定唯一键:
<EditorContainer key="editor1"/>
当重新渲染发生时,如果看到相同的密钥,这将告诉React不要破坏并重新生成视图,而是重用 . 然后焦点项目应保持焦点 .
如果它是反应路由器中的问题
<Route/>
使用render
prop而不是component
.失去焦点的原因在于
component
prop每次使用React.createElement
而不是仅仅重新渲染更改 .详情:https://reacttraining.com/react-router/web/api/Route/component
我一次又一次地回到这里,总是在最后找到解决方案 . 所以,我会在这里记录,因为我知道我会再次忘记这一点!
input
在我的案例中失去焦点的原因是因为我正在重新渲染input
状态变化 .越野车代码:
所以,问题是我总是开始在一个地方编码所有内容以快速测试,然后将其全部分解为单独的模块 . 但是,这里的策略适得其反,因为在输入更改时更新状态会触发渲染功能,并且焦点会丢失 .
修复很简单,从一开始就进行模块化,换句话说,“将
Input
组件移出render
函数”固定代码
参考 . 解决方案:https://github.com/styled-components/styled-components/issues/540#issuecomment-283664947
我刚刚遇到这个问题并来到这里寻求帮助 . 检查你的CSS!输入字段不能
user-select: none;
,否则无法在iPad上运行 .我有同样的行为 .
我的代码中的问题是我创建了一个嵌套的jsx元素数组,如下所示:
每次更新父元素时,此嵌套数组中的每个元素都会重新呈现 . 因此输入每次都会失去“ref”道具
我修复了问题,将内部数组转换为反应组件(具有渲染函数的函数)
EDIT:
当我构建一个嵌套的
React.Fragment
时会出现同样的问题核心原因是:当React重新渲染时,之前的DOM引用将无效 . 这意味着react已经改变了DOM树,你this.refs.input.focus将不起作用,因为这里的输入不再存在 .
将
autoFocus
属性应用于input
元素可以在只有一个需要聚焦的输入的情况下执行变通方法 . 在这种情况下,key
属性是不必要的,因为它必须担心将input
元素分解为它自己的组件,以避免失去对主要组件的重新渲染的关注 .对我来说,这是由于 same 组件(称为UserList)中呈现的搜索输入框作为搜索结果列表引起的 . 因此,每当搜索结果发生更改时,整个UserList组件都会重新呈现,包括输入框 .
我的解决方案是创建一个名为 UserListSearch 的全新组件,它与 UserList 分开 . 我不需要在UserListSearch的输入字段上设置键就可以了 . 我的UsersContainer的渲染功能现在看起来像这样:
希望这对某人也有帮助 .
提供的答案对我没有帮助,这是我做的,但我有一个独特的情况 .
为了清理代码,我倾向于使用这种格式,直到我准备将组件拉入另一个文件 .
但是当我将代码直接放在它工作的div中时,这会导致它失去焦点 .
我不知道为什么会这样,这是我用这种方式编写的唯一问题,而且我在大多数文件中都这样做,但是如果有人做了类似的事情,这就是它失去焦点的原因 .
结果我将
this
绑定到导致它重新渲染的组件 .我想我会在这里发布,以防其他人有这个问题 .
我不得不改变
至
简单修复,因为在我的情况下,我实际上并不需要在
renderField
中使用this
,但希望我发布这个将有助于其他人 .我将
value
道具切换为defaultValue
. 这对我行得通 .我在html表中遇到了同样的问题,我在列中输入了文本行 . 在循环中我读了一个json对象和我创建行特别是我有一个带有inputtext的列 .
http://reactkungfu.com/2015/09/react-js-loses-input-focus-on-typing/
我设法通过以下方式解决它