React силы компонента высшего порядка re-render обернутого компонента

Я изо всех сил пытаюсь понять, как правильно реализовать это поведение проверки в компоненте более высокого порядка.

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

EDIT: TLDR: благодаря превосходному предложению пользователя @noa-dev я создал скрипку React здесь: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
}

компонент родительской форме:

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

1 ответов


на render метод Form компонент, вы создаете новый ValidatingTextBox каждый раз:

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

вместо этого вы должны сделать компонент, а затем использовать его, чтобы экземпляр поддерживался. А возможно Form компонент будет выглядеть так:

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