javascript - React.js-重新渲染时输入失去焦点(React.js - input losing focus when rerendering)

Question

I am just writing to text input and in onChange event i call setState , so React rerenders my UI.(我只是写文本输入，在onChange事件中我调用setState ，所以React重新渲染了UI。)

The problem is that the text input always lose a focus, so i need focus it again for each letter :D.(问题在于文本输入始终会失去焦点，因此我需要再次针对每个字母：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> ); } });   ask by Krab translate from so

Answer 1

Without seeing the rest of your code, this is a guess.(没有看到其余的代码，这是一个猜测。)

When you create a EditorContainer, specify a unique key for the component:(创建EditorContainer时，请为组件指定一个唯一键：) <EditorContainer key="editor1"/> When a re-rendering occurs, if the same key is seen, this will tell React don't clobber and regenerate the view, instead reuse.(当发生重新渲染时，如果看到相同的密钥，这将告诉React不要破坏和重新生成视图，而是重新使用。) Then the focused item should retain focus.(然后，重点项目应保持重点。)