javascript - React.js - 输入在重新渲染时失去焦点

Question

我只是写入文本输入，在 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>
        );
    }

});

Answer 1

在没有看到您的其余代码的情况下，这是一个猜测。创建 EditorContainer 时，为组件指定一个唯一键:

<EditorContainer key="editor1"/>

当重新渲染发生时，如果看到相同的键，这将告诉 React 不要破坏并重新生成 View ，而是重用。然后焦点项目应该保持焦点。