प्रतिक्रिया उच्च घटक घटक बल लपेटा घटक

Question

पुन: प्रस्तुत करने के लिए मैं एक उच्च आदेश घटक में इस सत्यापन व्यवहार को सही ढंग से कार्यान्वित करने के तरीके के बारे में समझने के लिए संघर्ष कर रहा हूं।

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

संपादित करें: टीएलडीआर: उपयोगकर्ता को धन्यवाद @ नोआ-देव के उत्कृष्ट सुझाव मैंने इस मुद्दे को दिखाने के लिए यहां एक प्रतिक्रियात्मक पहेली बनाई है: https://jsfiddle.net/8nLumb74/1/।

बस शब्दों में कहें: इस एचओसी द्वारा लिपटे जाने पर मेरा टेक्स्टबॉक्स संपादन पर ध्यान क्यों देता है?

मैं क्या गलत कर रहा हूं?

पाठ बॉक्स घटक:

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 
} 

माता पिता पर्चा घटक:

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

Form घटक के render विधि में, आप बना रहे हैं एक नया ValidatingTextBox हर बार:

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

इसके बजाय, आपको घटक बनाना चाहिए और फिर इसका उपयोग करना चाहिए ताकि उदाहरण बनाए रखा जा सके।

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