反应组件失去焦点

Question

我有一个非常简单的反应组件，我想将其保存为文件中的字符串，然后评估它＆amp;在另一个组件中显示它（EG：ComplexComponent）。我把原始组件放在一边＆amp;要成为字符串的组件，它是相同的组件。

问题：是否有人知道为什么从字符串创建的组件/文本框失去了焦点＆amp;怎么解决？我输入一个角色，然后我必须再次点击文本框等等，它真的很烦人:-(

代码也在这里（你可以看到实时问题）：http://jsfiddle.net/jonattfin/s7fh1q9g/

var SimpleComponent = React.createClass({

    _changeAge: function(e) {
        this.props.changeAge(e.target.value);
    },

    render: function(){
        return  (
            <div >
                <input type='text' value={this.props.age} onChange={this._changeAge} />
            </div>
        );
    }
});

var ComplexComponent = React.createClass({

    getInitialState: function() {
        return {
            age1: '',
            age2: ''
        };
    },

    _changeAge1: function(value) {
        this.setState({
            age1: value
        });
    },

    _changeAge2: function(value) {
        this.setState({
            age2: value
        });
    },

    render: function(){

        var simpleComponentString = "React.createClass({ displayName: 'SimpleComponent', _changeAge: function _changeAge(e) { this.props.changeAge(e.target.value); }, render: function render() { return React.createElement( 'div', null, React.createElement('input', { type: 'text', value: this.props.age, onChange: this._changeAge }) ); } });";
        var SimpleComponentFromString = eval(simpleComponentString);

        return  (
            <div>
                Age1:<br/>
                <SimpleComponent key='simpleComponent' age={this.state.age1} changeAge={this._changeAge1}/>
                Age2:<br/>
                <SimpleComponentFromString key='simpleComponentFromString' age={this.state.age2} changeAge={this._changeAge2}/>
            </div>
        );
    }
});