React rebuild tree with HOC components (causing input field focus loss)

You don't have to create Element in the render function. Instead you can create it in the constructor:

class MyComponent extends React.Component {
    constructor (props) {
        super(props);
        this.state = {value : 'start value'};
        this.element = HOC(Input);
    }
...

And use it in your render function like this:

        <span>
            <this.element
                value={this.state.value}
                onChange={this.onChange.bind(this)}
            />
        </span>

If needed you can update this.element in componentWillReceiveProps() or componentWillUpdate().

UPDATE: fiddle

Tags:

Reactjs