入力HOCコンポーネントを正しく作成する方法は？

Question

私は文字

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

の数を蓄積コンポーネントを作りたい。しかしのonChangeメソッドは私のミス何 と呼ばれることはありませんか？

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

を使用し 私はまた、あなたがHOCを取り除くと、単純なラッパーコンポーネントを作る得ればと思いました。 しかし、その後、私はあなたがあなたのSomeInputコンポーネントの実際の入力までの小道具を渡すのを忘れているラッパーからの入力や小道具に小道具を渡すと警告

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

Answer 1

を得る：ここで

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

はあなたの固定されcomponent。