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