Wie werden Eingabe-HOC-Komponenten korrekt erstellt?

Question

Ich möchte eine Komponente machen, die die Anzahl der Zeichen

import React, {Component, PropTypes} from "react"; 

export const withAccumulate = (WrappedComponent) => { 
    return class ControlCharsInput extends Component { 

     static propTypes = { 
      accumulate: PropTypes.number, 
      afterAccumulate: PropTypes.func.isRequired 
     }; 

     static defaultProps = { 
      accumulate: 0 
     }; 

     constructor(props) { 
      super(props); 
     } 

     onInputChange = (e) => { 
      const value = e.target.value; 
      if(value.length > 0 && value.length < this.props.accumulate){ 
       e.preventDefault(); 
       return; 
      } 
      this.props.afterAccumulate(value); 
     }; 

     render() { 
      return <WrappedComponent onChange={this.onInputChange}/>; 
     } 
    }; 
}; 

Aber die onChange Methode namens wird nie Was ist mein Fehler sammelt? Gebrauchte

const SomeInput = props => (<input className=.../>) 
const InputAccumulate = withAccumulate(SomeInput); 

Ich dachte auch, dass, wenn Sie von HOC loszuwerden und einen einfachen Wrapper-Komponente machen. Aber dann gehe ich Requisiten Eingang und Requisiten aus der Verpackung und bekomme Warnungen

render() {  // here props combined with afterAccumulate etc 
return (<input {...props} onChange={this.onChange}>) 
} 

Answer 1

Sie haben vergessen haben Requisiten passieren hin zu dem eigentlichen Eingang in Ihrer SomeInput Komponente:

const SomeInput = (props) => (<input {...props}/>) 

hier Ihr Fest ist component.