Reaction Higher Order Component zwingt das Rendern der umschlossenen Komponente

Question

Ich habe Schwierigkeiten zu verstehen, wie dieses Validierungsverhalten in einer Komponente höherer Ordnung korrekt implementiert wird.

===========================================

EDIT: TLDR: Dank user @noa-devs exzellentem Vorschlag habe ich hier eine React Fiddle erstellt: https://jsfiddle.net/8nLumb74/1/ um das Problem zu zeigen.

Einfach ausgedrückt: Warum verliert meine Textbox den Fokus auf Bearbeitung, wenn sie von diesem HOC verpackt wird?

Was mache ich falsch?

Die Textbox Komponente:

import React from 'react' 

export default React.createClass({ 
    changeText(e) { 
     if (this.props.validate) 
      this.props.validate(e.target.value) 
     this.props.update(e.target.value) 
    }, 
    componentDidMount() { 
     console.log('should only be fired once') 
    }, 
    render() { 
     return (<input type="text" 
      value={this.props.text} 
      onChange={this.changeText} />) 
    } 
}) 

Der Validator Komponente:

import React from 'react' 

export default function (WrappedComponent) { 
    const Validation = React.createClass({ 
     validate(text) { 
      console.log('validating', text) 
     }, 
     render() { 
      return (
       <WrappedComponent 
       {...this.props} 
       validate={this.validate} 
       /> 
      ) 
     } 
    }) 
    return Validation 
} 

Die Mutterformularkomponente:

import React from 'react' 
import TextBox from './text-box' 
import Validator from './validator' 

export default React.createClass({ 
    getInitialState() { 
     return ({text: 'oh hai'}) 
    }, 
    update(text) { 
     this.setState({text}) 
    }, 
    render() { 
     const ValidatingTextBox = Validator(TextBox) 
     return (<ValidatingTextBox 
      text={this.state.text} 
      update={this.update} />) 
    } 
}) 

Answer 1

Im render Verfahren der Form Komponente, erstellen Sie eine neue ValidatingTextBox jedes Mal: ​​

render() { 
     const ValidatingTextBox = Validator(TextBox) 
     return (<ValidatingTextBox 
      text={this.state.text} 
      update={this.update} />) 
    } 

Stattdessen sollten Sie die Komponente erstellen und dann verwenden, damit die Instanz verwaltet wird. Eine mögliche Form Komponente würde wie folgt aussehen:

import React from 'react' 
import TextBox from './text-box' 
import Validator from './validator' 

const ValidatingTextBox = Validator(TextBox) 

export default React.createClass({ 
    getInitialState() { 
     return ({text: 'oh hai'}) 
    }, 
    update(text) { 
     this.setState({text}) 
    }, 
    render() { 
     return (<ValidatingTextBox 
      text={this.state.text} 
      update={this.update} />) 
    } 
})