より高次のコンポーネントに反応してラップされたコンポーネントの再レンダリングを強制します。

Question

高次コンポーネントでこの検証動作を正しく実装する方法を理解するのは苦労しています。

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

編集：TLDR：user @ noa-devの優れた提案のおかげで、私はReact Fiddleをここに作成しました：https://jsfiddle.net/8nLumb74/1/問題を表示します。

簡単に言えば、このHOCでラップされたときにテキストボックスが編集に専念しないのはなぜですか？

私は間違っていますか？

TextBoxコンポーネント：

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} />) 
    } 
}) 

検証コンポーネント：

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 
} 

親フォームコンポーネント：Formコンポーネントのrender方法で

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

、あなたが作成しています毎回新しいValidatingTextBox：

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

代わりに、コンポーネントを作成して使用して、インスタンスが維持されるようにする必要があります。私はネイティブドキュメントを反応https://facebook.github.io/react/docs/advanced-performance.htmlの高度なパフォーマンスに探して、あなたをお勧めします

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} />) 
    } 
})