我正在努力了解如何在更高阶的组件中正确实现此验证行为.

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

编辑:TLDR:感谢用户@noa-dev的出色建议,我在这里创建了一个React Fiddle:https://jsfiddle.net/8nLumb74/1/ 来显示问题.

简单地说:为什么我的文本框在被这个HOC包裹时会失去对编辑的关注？

我究竟做错了什么？

文本框组件:

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

Validator组件:

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' …